I just found this great article that uses only CSS to make videos responsive: http://www.wpstuffs.com/youtube-videos-responsive-wordpress/
Here’s the gist:
Add this to your style.css file:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
max-width: 100%;
}
Then, where ever you have a video, surround it with a “video-container” div. For example:
It worked great for me. I hope it will help you too!
Smithy says
Useful thanks. You can also save messing around (or relying on editors to get the div code right), by changing your target selectors like this:
span.embed-youtube {
position: relative;
padding-bottom: 56.25%;
padding-top: 18px; height: 0; overflow: hidden;
}
span.embed-youtube iframe,
span.embed-youtube object,
span.embed-youtube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
These are the selectors WP puts round the video when you just add the youtube address – so no need for the extra div etc.
Laura Hartwig says
Great. Thanks for the tip!
Pj says
SUPER HELPFUL!
anthony from reportingbusiness.fr says
thanks a lot for the tip! Also another tip: using wordpress function.php to automatically generate the wraper can be helpful if the blogger has many posts to modify w/ youtube videos.
For instance:
function wraper($html, $url, $attr) {
return ” . $html . ”;
}
add_filter(‘wraper’, ‘wraper’, 10, 3);
Laura Hartwig says
Thanks for letting us know!
John Okosun says
Very nice work and post. I find it very useful but before now there is a very simple way I make youtube videos responsive.
I just change the ‘560’ in the default embed code and replace it with 100%. With that the video becomes responsive.
You can check out a post here that explains more on it. https://obhiabablog.blogspot.com.ng/2016/10/responsive-youtube-video-twiiter-tweet.blogger-post.html
Once again.. Great work and thanks for sharing. I will bookmark your blog.
Laura Hartwig says
Yes, that’s right and make sure you set the height to ‘auto’ as well. Thanks for sharing!
Shege says
Thanks for these tips. I guess it should also work on blogger.
Rafal says
Hi, I’ve seen this solution already. Unfortunatelly this does not work for me. I have also a local copy (on local host) of my WP blog. It works just fine on local copy. But when I move online and make changes to my live version just nothing happens. I tried to play with the code but nothing seems to work. Any ideas?
I’d be grateful for any advice.
Laura Hartwig says
Hmm, weird. Are you using the same theme on local and live? Do you have a link to a post where you’re using this?
Rafal says
Yes, everything (including theme) is exactly the same in both cases. I just moved online recently. Here is the post http://mojdobryplan.pl/vn001-przestan-marnowac-czas/ It’s in polish so just to show you the embeded video 🙂
For now I just changed the width of youtube embed code to 100%. I treat that as a temp solution because it does not give enough flexibility.
Laura Hartwig says
Hmmm, using developer tools, I took out the 100% width you had in the iframe and replaced it with the 560 and it is still working for me. What specific problems were you having?
Rafal says
Wow, Laura you fixed it 😉
You are right. It works. I spent whole evening working on it. Now it’s ok.
Maybe it needed some time to accommodate on my site 😛
Once again, thanks for the solution.
Laura Hartwig says
🙂 Probably just the cache not getting your new CSS. Glad it is working for you and glad I could help.
Peter says
Thanks Laura. I made a free tool for generating responsive YouTube and Vimeo videos embeds based on this principle.
Here’s the page: https://powerdesign.com.ng/embedresponsively.
Laura Hartwig says
That’s great! Thanks for letting me know.