Last month, I found myself juggling the development of two new blogs, both of which required my full attention. From selecting the right niche to choosing the perfect domain name and, of course, picking the themes, there were plenty of important decisions to make. One of those blogs happens to be the very one you’re reading right now.
When it came to selecting the themes, I went with designs that caught my eye and made a strong first impression. I didn’t spend too much time obsessing over the finer details. In fact, I even purchased one of the themes. It wasn’t a huge investment, but naturally, I had higher expectations for it, given that I paid for it.
That brings me to the issue I wanted to address. To my surprise, I discovered that the videos embedded in the content weren’t responsive on the frontend. Wait, what? Are there still WordPress themes in 2024 that don’t display videos in responsive mode? Apparently, yes.
Despite this setback, I wasn’t ready to give up on the themes, especially since I really liked them. So, I rolled up my sleeves and set out to find a solution. And I did.
But how about you? Are you struggling to make your YouTube videos responsive in WordPress? Here you can find two solutions.
No Embed Code Is Needed Nowadays
In the classic editor in WordPress, if you want to insert a YouTube video in your post, you only need to paste the video URL on a line by itself and WordPress will take care of the rest. No embed code is needed.
And with the block editor, you simply insert a video block and put the YouTube URL inside and behind the schene the correct embedded code is created.
But Still, the Video Is Not Responsive
Adding width: 100% and height: auto to <iframe> / <object> / <embed> / <video> element in your CSS doesn’t help usually. Some are suggesting editing the HTML code directly, but who wants to mess with code in posts? I don’t! I’m lazy and I like to make editing the post as smooth as possible. And being a coder myself, I eventually came up with a small code that makes YouTube videos responsive.
The “No Plugin” Solution
The fix is quite simple. All you have to do is add the following CSS style code snippet by navigating to Appearance -> Customize -> Additional CSS in your WordPress admin panel:
Videos inserted using the classic editor:
p:has(>iframe),
p:has(>object),
p:has(>embed),
p:has(>video){
padding-top: 56.25%;
position: relative;
}
p>iframe,
p>object,
p>embed,
p>video{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}This example is based on my finding that the video embedding code appears inside a paragraph element <p>. If it doesn’t work in your case, I recommend that you research the HTML source of the page and modify the CSS code accordingly.
Videos inserted using the Gutemberg/block editor:
.wp-block-embed__wrapper{
position: relative;
padding-top: 50%;
}
.wp-embed-aspect-16-9 .wp-block-embed__wrapper{
padding-top: 56.25%;
}
.wp-embed-aspect-4-3 .wp-block-embed__wrapper{
padding-top: 75%;
}
.wp-block-embed__wrapper>iframe,
.wp-block-embed__wrapper>object,
.wp-block-embed__wrapper>embed,
.wp-block-embed__wrapper>video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Problem solved!
A quick explanation
the CSS code examples above are suitable for HTML code generated by both the classic editor and the Gutemberg or block editor. However, there are some differences.
With the classic editor, there is no way to dynamically determine the video’s aspect ratio, but you can adjust it to fit most videos by changing the padding-top value of the container element p:has(…). How do we find this value? It’s easy with a little bit of math.
- 16:9 is 9 divided by 16 which equals to 0.5625, or 56.25%. And that holds true for all aspect ratios:
- 4:3 is 3 divided by 4 which equals 0.75, or 75%.
- 2.39:1 is 1 divided by 2.39 which equals 0.4184, or 41.84%.
So simple!
The block editor instead, will generate slightly different code depending on the aspect ratio of the video, which is determined at the time of editing, so that the CSS style code can distinguish among them and adapt.
The Principle – Might Help You Adjust the CSS Code If Necessary
This code is more of a guide, the basic principle being that the video element must have position:absolute, and its container, position:relative. Also, for the container element it doesn’t matter if you use padding-top or padding-bottom for the aspect ratio, the result being the same!
The “Plugin” Solution
If the method above looks intimidating, there are quite a few plugins out there that do pretty much the same thing. I tried quite a few plugins to make the YouTube videos responsive in WordPress, but most of them were either premium or too heavyweight.
Eventually, two of them cought my attention:
- WP YouTube Lyte by Frank Goossens (futtta)
- YouTube Embed by YouTube Embed
They both do their job pretty well, but instead of using the editor video embed, I think they require using a shortcode.
PS: Now that you are aware of these solutions, just try them out and share your experience in a comment!
PPS: This blog is currently implementing the first “no-plugin” solution to make YouTube videos responsive, but in a different setup. I’m using a child theme for it because I needed to include other adaptations as well.
FAQ
Do I need coding knowledge to make the Youtube videos responsive?
No coding knowledge is required! If you implement the first method, everything is reduced to a simple copy & paste, and the 2nd method involves simply installing a plugin. Just focus on writing great content without handling technical tasks.
Will these changes slow down my website?
Not at all! Both solutions will have virtually no impact on the load time of your website, so you can enjoy the benefits of having responsive videos without compromising performance.
Are these solutions compatible with all WordPress themes?
Yes. The solutions depend only on the way the post editors (classic or Guttenberg) are coding the content. If you experience any issues, please reach out to us for assistance.
