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="http://www.youtube.com/embed/abcdefghi" frameborder="0" width="560" height="315"></iframe>
</div>

References, Sources and Credits:




Comments

Popular posts from this blog