How to Make Youtube Videos Responsive in Blogger?

9/21/2020

Welcome to Asif Kamboh.com blog, At this point I will explain to you how you can make YouTube, Vimeo or Dailymotion videos responsive on your blog.

So if you are interested in this method or you want to make your Blogspot Blog videos responsive then follow these steps.

What's the Difference Between Responsive and Unresponsive Video?
How to Make Youtube Videos Responsive in Blogger?
- Demo Link of the Responsive Youtube Video.

What's the Difference Between Responsive and Unresponsive Video?

If the width and height of the video inside the frame is exactly the width and height of the video, and when you increase or decrease the body of the frame, the height and width of the video will be more or less according to the video and the video will look clear. it means this video is responsive.

If the video within the frame of the video player is viewed more than the width of the video or more than the height of the video, then the video is not responsive.

How to Make Youtube Videos Responsive in Blogger?

Open Blogger Dashboard > Themes Menu > Click on the Three Dots and click the Edit HTML option, and then add the following CSS code before the </head>.

<style type='text/css'>
/* Asif Kamboh - www.asifkamboh.com */
.iframeWrapper{position:relative;padding-bottom:56.25%;padding-top:25px;height:0;}
.iframeWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;}
</style>

When you add the above CSS code to your Blogger theme, click the "Save Theme" button in the top right corner to save the changes into your blog theme.

Then go to the post where you want to add the YouTube video, then change the tab to "HTML View" and add the below code.

<div class='iframeWrapper'>
<iframe width="640" height="360" src="//www.youtube.com/embed/uZV9T37JEbc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>