Home / Articles / Programming languages / Markup languages / HTML & CSS / Resizing YouTube and HTML5 videos proportionally using CSS for responsive web design

Resizing YouTube and HTML5 videos proportionally using CSS for responsive web design

Resizing YouTube and HTML5 videos proportionally using CSS for responsive web design
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article demonstrates how video can be resized automatically to fit the width of its container using only CSS with appropriate aspect ratio. The current solution works for any video which is set in iframe, embed, object or video tags.

Here is a simple HTML code which YouTube provides for sharing its videos on other websites:

<iframe width="640" height="480" src="http://www.youtube.com/embed/WZqTxWIHFQQ" frameborder="0" allowfullscreen></iframe>

Just try to resize browser window to make sure that the video doesn't change its size relatively to browser window width:

Live demo

As can be seen above the video has a fixed size.

To make the video adjustable to its container width, its code (iframe tag in our case) must be placed inside div tag with class "video-responsive" then the appropriate styles must be added.

HTML code:

<div class="video-responsive">
  <iframe width="640" height="480" src="http://www.youtube.com/embed/WZqTxWIHFQQ" frameborder="0" allowfullscreen></iframe>
</div>

CSS code:

.video-responsive {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

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

Now the YouTube video above adjusts its size to its container width.

Live demo

Here is the main thing which you have to know about the styles above to fully use them for other videos.

Every video has its own aspect ratio. Standard aspect ratio for a video is 4:3, but nowadays a lot of videos are created in widescreen format with aspect ratio of 16:9. This fact has to be taken into consideration when you are going to use this solution. The styles above are developed for videos with aspect ratio of 4:3. If you want to use them for videos with 16:9 aspect ratio, you will need to replace the value of padding-bottom CSS property with the following padding-bottom: 56.25%;.

Actually here is a formula to calculate the value of the padding-bottom property for a video with any possible aspect ratio:

height / width * 100

Calculations for current examples:

9 / 16 * 100 = 56.25
3 / 4 * 100 = 75

Now, it's clear how we got padding-bottom: 56.25%; for aspect ratio of 16:9 and padding-bottom: 75%; for 4:3 aspect ratio.

The current solution works in the same way for HTML5 videos as for YouTube videos.


 

Read also

CSS3: media queries

CSS3: media queries

Discussion (total 1 comments)

Cyclodex
February 06, 2014 at 09:25 am
Nice tricky! Thanks a lot!

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation