This post has been archived
The content of this post has not been updated since 2015, and may be out of date. Extra care should be taken with any code provided.
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.
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.
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.
October 2024
The disagreement between WordPress and WP Engine has sparked considerable debate within the WordPress community and could have important implications for users of the WordPress...
→ Continue reading"What's going on between WordPress and WP Engine?"
September 2024
Combining Laravel with WordPress offers a unique and powerful approach to web development, blending the strengths of both platforms to create highly efficient, flexible, and...
September 2024
Switching a WordPress website over to ClassicPress can be done smoothly with minimal impact if approached carefully. The process involves a few key steps to...
→ Continue reading"Switching from WordPress to ClassicPress "
July 2024
The Bitnami package for WordPress provides a quick one-click install solution for WordPress. Once installed you'll most likely need to replace the default install with...
April 2024
ClassicPress is an open-source content management system (CMS) that originated as a fork of WordPress in 2018. It was developed as a response to the...
November 2023
In today's digital age, establishing an online presence is crucial for businesses looking to promote their brand effectively. One powerful tool for achieving this is...
→ Continue reading"Creating a brand-promoting brochure website with WordPress "
July 2021
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...
November 2019
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...
December 2016
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...
→ Continue reading"Testing YouTube embedded video responsiveness in WordPress"