When embedding videos into your website you may notice that annoyingly YouTube videos are not responsive. Once you paste the iframe code into your page it looks fine on your desktop but on the mobile the video size is still the same. This is a big oversight by YouTube in my opinion.

Vimeo on the other hand do provide an responsive embed code which means your videos look great on any screen.

If like me you mainly use YouTube for video uploads here is a fix to make all your videos responsive.

Here is the original Iframe Code from You Tube (2021 example)

<iframe width="560" height="315" src="https://www.youtube.com/embed/Zq_k3KaWVLI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

• Step 1: Add the following  DIV <div style="padding:56.25% 0 0 0;position:relative;">
• Step 2: Remove the width="560" height="315"
• Step 3: Add the style attribute in the iframe style="position:absolute;top:0;left:0;width:100%;height:100%;"

Your final responsive YouTube Iframe code looks like this:

<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://www.youtube.com/embed/bVwMWwY9kIE" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:100%;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

 

Compare the 2 videos on mobile:

Video 1 Non responsive code by YouTube

Video 2 responsive code by YouTube with On Target enhancements!