Skip to content

Latest commit

 

History

History
80 lines (60 loc) · 3.85 KB

README.md

File metadata and controls

80 lines (60 loc) · 3.85 KB
Raw

7wp Flex Embed

Transforms your static embeds into shiny responsive ones.

This plugin applies dynamically the suitcss/components-flex-embed methodology to all your embeds (even <iframe> pasted manually into Text tab).
Instead of applying a simple iframe { max-width: 100%; } in your CSS and having black borders to the top and bottom of your YouTube videos, this plugin keeps the right intrinsic ratio of the embeds.

Comparison of renders on iPhone 7 with a 375px width:

Default behaviour`iframe { max-width: 100%; }`7wp Flex Embed
❌✔️✔️✔️✔️
Iframe is cropped or overflowed on the right Iframe is well displayed but only its width is reduced Iframe is perfectly displayed

Because the Embed part of WordPress is so interesting, the plugin doesn't stop there. It:

  • turns off autoembed behaviour to have just [embed] shotcodes (but you are able to reverse this choice);
  • sets the width of oEmbed requests according to your $content_width;
  • keeps a raw copy of the oEmbed endpoint response into a post meta _oembed_data_{cache_key};
  • loads wp_embed.js script only when needed and not every time (perf matter);
  • supports [soundcloud] and [slideshare] shortcodes introduced by WordPress.com;
  • adds support to insert beautiful GIFs from Giphy (not in Gutenberg yet);
  • allows to reduce the embed service list (applied to Gutenberg Embed Blocks as well).

Usage

Gutenberg

If you already use Gutenberg (not my case), you may turn on autoembed behaviour with this code add_filter( 'swp_fe_remove_autoembed', '__return_false' ). It's a bit weird but Gutenberg uses this way to render [embed] shortcodes in front-end. It's a bad news.

Select your needed embed services

By default, WordPress supports 34 embed services and Gutenberg offers the same number of Embed Blocks. IMHO, especially for Gutenberg, it's too much and most customers don't know half of them.
This plugin chooses to reduce this long list to the five most common ones: Twitter, Facebook, YouTube, Dailymotion and Vimeo.
But you are able to select your own:

function my_theme_select_allowed_embed_providers( $allowed_providers ) {
    return array( 'Instagram', 'SoundCloud', 'WordPress.tv' ); 
}
add_filter( 'swp_fe_allowed_providers', 'my_theme_select_allowed_embed_providers' );

You can find the complete list there: https://codex.wordpress.org/Embeds

Deliver an inline version of the plugin assets

add_filter( 'swp_fe_enqueue_style', '__return_false' );
add_action( 'wp_head', function() { echo swp_fe_get_inline_style(); } );

Installation

  1. Manually download the plugin and upload the extracted folder to the plugins directory (e.g.: /wp-content/plugins/)
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Enjoy

Attached issues

Changelog

1.0.0 (August 9, 2018)

  • Initial Release.