Responsive YouTube, Vimeo, Embed, and HTML5 Video with CSS

Admin

9 years ago

HTML:

<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>

</div>

CSS:

<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>

.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/