HTML:
1 2 3 | <div class="js-video [vimeo, widescreen]"> <iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <style type="text/css"> .js-video { height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden; } .js-video.widescreen { padding-bottom: 56.34%; } .js-video.vimeo { padding-top: 0; } .js-video embed, .js-video iframe, .js-video object, .js-video video { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } </style> |
Source: https://jonsuh.com/blog/responsive-youtube-vimeo-embed-and-html5-video-with-css/