Responsive Video Using CSS, yes that’s right. No javascript or jQuery is needed to make videos responsive on your website. This quick tip applies to both iframe based embedded videos e.g. YouTube or Vimeo as well as self-hosted videos.

HTML code for embedded YouTube video:

<div class="responsive-video"><iframe src="https://www.youtube.com/embed/YOUR-VIDEO-ID" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

 

<div class="responsive-video self-hosted-vdieo"><video controls="controls" width="300" height="150"><source src="your-self-hosted-video.mp4" /></video></div>

 
Making responsive video using css with “The Incredible Singing Cat” solution:

.responsive-video {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.responsive-video iframe,
.responsive-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Making responsive video using css with “intrinsic ratio technique” solution:

.responsive-video {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
} 

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

Is there any alternate solution you use? If you do then please share with us through the comments section below.