Make video fit 100% with any screen resolution

by

Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG

So your CSS would be:

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

HTML:

<div class="video-container">
  <video>
    <source src="https://stackoverflow.com/questions/36949747/~/Videos/myvideo.mp4" type="video/mp4" />
  </video>
</div>

Leave a Comment