vikrantnegi
12/29/2015 - 12:31 PM

Responsive embedded video

Responsive embedded video

<div class="video-wrapper">
  <iframe></iframe>
</div>
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
}

.video-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


/*
To Calculate the padding %age do the following: 

Given the video with an aspect ratio of 16:9

padding-bottom: ((9/16) * 100) %
*/