Wednesday, September 23, 2015

How to Make a YouTube Video Responsive

This work comes from a great blog post by John of AvexOline who identified the solution.  The only reason I'm blogging about it is in fear that I might lose the link or something might happen to their post - I needed to document this for myself, which is the reason I blog in the first place!

FWIW - the video below is actually terrific and worth watching!

<style type="text/css">
.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%;}
</style>

<div class="video-container">
<iframe allowfullscreen="" frameborder="0" height="100%" src="https://www.youtube.com/embed/qgP7SGhiHCg?rel=0&amp;showinfo=0" width="100%"></iframe>
</div>


Responsive video in action: