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: http://avexdesigns.com/responsive-youtube-embed/