Responsive Video Using CSS

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.



7 Comments

  • Hi, this weekend is good in favor of me, as this moment i am reading this fantastic educational post here at my residence. Katuscha Baxie Bruce
  • I am thinking of visiting your website again Thanks
  • I am commenting to let you know of the fantastic encounter my cousin's daughter experienced reading your site. She even learned many issues, most notably how it is like to have a marvelous coaching heart to get folks easily fully grasp a variety of complicated matters. You actually did more than my desires. I appreciate you for delivering such great, dependable, edifying and also cool guidance on that topic to Evelyn.
  • I am only writing to make you understand what a remarkable experience our princess undergone viewing your webblog. She picked up such a lot of things, with the inclusion of what it is like to possess an ideal teaching spirit to make the mediocre ones without difficulty master specified tortuous topics. You undoubtedly surpassed readers' expected results. Thanks for rendering those useful, trustworthy, revealing as well as unique tips on your topic to Sandra.
  • Wow, great blog article.Really thank you! Really Great.
  • Wow, great blog article.Really thank you! Really Great.

Leave a comment