How to make YouTube embedded videos responsive on Blogger blogs

This is how to make the YouTube embedded videos responsive to screen sizes on a Blogger blog.

Add the following CSS styles into the Blogger CSS styles section of the Blogger template:
.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%;
Then, add additional div class video-container code wrapping around the YouTube embed code:
<div class="video-container">
      <iframe src="" frameborder="0" width="560" height="315"></iframe>

References, Sources and Credits:


Popular posts from this blog