Getting embedded videos to work responsively (and resize proportionately) has been a hassle, until I found this lil tidbit. Wrap your video embed code in a div with class “video-container”, and using the following CSS, the video will fill its container, and maintain it’s proportions as you resize it!
In the .video-container
style, set the padding-bottom
to the percentage you get when you divide your target height by your target width. So for 16:9 ratio, use 56.25%, since 9 / 16 = 0.5625.
I learned this technique from the example here: https://github.com/chriscoyier/Fluid-Width-Video
See this in action in this JSFiddle (http://jsfiddle.net/paleosun/caww0bke/).
Markup
1 2 3 4 5 6 7 8 | <div class="video-container"> <iframe width="16" height="9" src="//www.youtube.com/embed/mjj9d33U9cI?rel=0&showinfo=0&vq=hd720&modestbranding=1&iv_load_policy=3&controls=2" frameborder="0" allowfullscreen></iframe> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .video-container{ position: relative; padding-bottom: 56.25%; /* for 16:9 ratio, 9 / 16 = 0.5625 */ padding-top: 25px; height: 0; overflow: visible; margin: 0px 10px 20px 10px; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Comments (0) Write a comment
Leave a Comment