Responsive YouTube Embeds in WordPress

by Anthony Eden / January 3, 2019 / Web

iFrames on a responsive website can be a pain, and unfortunately video embeds such as those from YouTube come supplied as an iFrame. Thankfully, there’s some simple code you can add to your WordPress Theme to automatically resize these embedded videos to fit neatly on your website.

This code wraps the iFrame in a div, and adds some classes. Then, the CSS resizes the object to a proper 16:9 proportion.

To get started, add the following code to your functions.php file:

<?php add_filter('the_content', functions($content) { return str_replace(array("<iframe", "</iframe>"), array('<div class="iframe-container"><iframe', "</iframe></div>"), $content); }); add_filter('embed_oembed_html', function ($html, $url, $attr, $post_id) { if(strpos($html, 'youtube.com') !== false || strpos($html, 'youtu.be') !== false){ return '<div class="embed-responsive embed-responsive-16by9">' . $html . '</div>'; } else { return $html; } }, 10, 4); add_filter('embed_oembed_html', function($code) { return str_replace('<iframe', '<iframe class="embed-responsive-item" ', $code); });

You can also add this CSS to your stylesheet (you may need to tweak it based on your stylesheet):

.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive .embed-responsive-item, .embed-responsive iframe { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } .embed-responsive-16by9 { padding-bottom: 56.25%; }

This CSS is courtesy of the Bootstrap framework.

Get the Broadcast Technology Newsletter

You may also be interested in...

I'm Anthony Eden, and I'm a IT Professional, Broadcast Technician, Software Developer, and Solutions Engineer. I've been working in broadcast media since 2008, and developing software and websites for just as long. Right now, I provide freelance services through Media Realm - in particular, to the media and not-for-profit industries.

Follow Anthony on Twitter: @anthony_eden