Building responsive WordPress sites requires that all of the elements scale well to fit into the various viewport sizes. Embedded youtube videos can be difficult to fit into a responsive design, however by adding an extra wrap div and some CSS, the default WordPress video embeds can be made to play nicely within a responsive theme.
The Plugin
A filter is used to add a wrap div to the standard WordPress embed function
add_filter('embed_oembed_html', 'cc_embed_oembed_html', 99, 4);
function cc_embed_oembed_html($html, $url, $attr, $post_id) {
return '<div class="embed-wrap">' . $html . '</div>';
}
Some CSS is added as a separate stylesheet to enable the responsive display of the video by targeting the wrap we added as well as the default elements.
.embed-wrap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-wrap iframe,
.embed-wrap object,
.embed-wrap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This stylesheet is being added to the document head via a WordPress, so to make the plugin even more lightweight, the CSS rules can be copied to the child theme’s stylesheet, and the plugin can be prevented from adding its stylesheet by including the following line in the functions.php:
<?php remove_action('wp_print_styles', 'cc_ductile_embed_css', 30); ?>
Example
I have used this plugin on the Junkyard Rocket website, for embedding responsive videos; here is an example.
Enter the url to the video on its own line as normal for a WordPress video embed
http://www.youtube.com/watch?v=PGd61vtlgwY
How the result appears on the page
Does the universe really need another responsive video embeds plugin for WordPress?
There are already a load of plugins which achieve the same result as this one. Some provide extra functionality like shortcodes, and some are fairly slimline but use client-side javascript to modify the default embed rather than a server-side function. I like plugins to be as lightweight as possible, so I think there’s room for this one.
Download
You can download the plugin from the WordPress.org plugin repository at http://wordpress.org/plugins/ductile-responsive-video/