Warning: Your browser is very out-of-date. You should upgrade to a better browser.

It turns out YouTube video uploads have come a long way since I last tried them out. This is a test post with no discernibly interesting content. WordPress has, for quite a long time allowed embedding YouTube content simply by copy and pasting the URL into the WordPress post editor.

Checking-out how WordPress handles YouTube embeds, whether or not they are responsive and if not how I can make them work better.

Update

So it turned out that the standard embed method will add a fixed width video iframe into the page. To make this responsive a couple of additions were required.

First wrap YouTube embed iframes in a container. Add the following script to your theme functions.php script

add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);

function wrap_embed_with_div($html, $url, $attr) {
    return "<div class=\"responsive-container\">".$html."</div>";
}

Then add a little bit of CSS to your themes style.css or wherever your main CSS file is

.responsive-container { position: relative; padding-bottom: 50.25%; padding-top: 30px; height: 0; overflow: hidden; margin-bottom: 1em; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

And that did the job.


WordPress developer

in Belfast, Northern Ireland

I’ve been developing WordPress websites for 10 years and am always looking for the next exciting project from personal blog, community portal or business website. Why not get in touch to see if I can help you with yours.

Contact me today!

WordPress

WordPress is fast, flexible, responsive and open source. Your WordPress site can be built from the ground up to be fast, accessible and search engine friendly.

About WordPress · WordPress Posts

Related WordPress Posts

WordPress October 2020

WordPress - Rename the Posts section in Admin

The PHP script below can be added to the WordPress Theme functions.php file. It will rename the standard "posts" section to "stories". Replace 'stories'/'story' with...
WordPress August 2020

Notes on Transferring a WordPress site to AWS

Some notes on transferring an existing WordPress site to Amazon Web Services and some common issues. ## MySQL Import Fail If the import fails on...
WordPress November 2019

WordPress Security - Nginx Hardening

Techniques for hardening WordPress Sites running on an Nginx server to enhance security. ## Limit Access to Admin Panel ### Limit XMLRPC Access This will...

More WordPressFrontend Posts...

Related Frontend Posts

Frontend July 2021

AOS: The Animate On Scroll Library

AOS is a simple CSS/JS based animation on scroll library by [Michał Sajnóg](https://github.com/michalsnik). Easy to install and highly configurable. This is a basic introduction, there...
Notes Frontend November 2019

Simple jQuery Cookie Pop-up

This is a simple EU cookie notification pop-up for legacy websites. All that's required is jQuery. Add the following HTML, jQuery script and apply some...
WordPress Frontend December 2016

Testing YouTube embedded video responsiveness in WordPress

It turns out YouTube video uploads have come a long way since I last tried them out. This is a test post with no discernibly...

More WordPressFrontend Posts...