Mobile Friendly Website

CSSPLAY

Doing it with style

TUTORIALCSS ONLY responsive video aspect ratios & the use of calc()

Date : 6th February 2015

For all the latest browsers, Android and iOS



Aspect Ratio 16:9
Aspect Ratio 3:2
Aspect Ratio 4:3


Information

This is a method of controlling responsive aspect ratios of videos in iframes, such as Vimeo video, using just CSS.

This requires the removal of the height and width values from the iframe and wrapping each in an element which then controls the width and height to maintain the aspect ratio at all browser window sizes.

Using CSS the iframe is given a width and height of 100% and an absolute position with left and top equal to zero.

The wrapping element is given a percentage width, to make it responsive, and zero height. It is then given a top, or bottom, padding as a percentage.

When padding is specified as a percentage this is calculated as a percentage of the element width. So this can be used to calculate the 'height' of the padding to maintain the aspect ratio.

For an aspect ratio of 16:9 the padding will be 100% / (16/9) = 56.25%

For an aspect ratio of 3:2 the padding will be 100% / (3/2) = 66.666667%

For an aspect ratio of 4:3 the padding will be 100% / (4/3) = 75%

You can enter these values directly or, as I have done, let CSS do this for you using the calc() function.

This does not pass the Google mobile friendly checker even though it is.

HTML Code

Using Vimeo for the iframe code, just remove the width and height settings, and wrap each video in a parent <div> with the class 'wrap' and the apect ratio required classname.
I converted the original 16:9 video to 3:2 and 4:3 aspect ratios and uploaded all three to Vimeo.

<article class="parent">
  <h5>Aspect Ratio 16:9</h5>
  <div class="wrap aspect-ratio-16-9">
    <iframe src="http://player.vimeo.com/video/118802506" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <h5>Aspect Ratio 3:2</h5>
  <div class="wrap aspect-ratio-3-2">
    <iframe src="http://player.vimeo.com/video/118802505" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  <h5>Aspect Ratio 4:3</h5>
  <div class="wrap aspect-ratio-4-3"> 
    <iframe src="http://player.vimeo.com/video/118802504" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</article>

Cascading Style Sheet

I have used the CSS calc() function to calculate the top padding, but you can also just enter the actual value.

/* set up the parent size */
.parent {width:50%; margin:50px auto;}

/* set up the wrap 
with a width of 100%, a height of 0 and a relative position */ .wrap {position:relative; width:100%; height:0; margin:1% 0 5% 0;} /* set the top padding to the aspect ratio of each video using calc() */ .aspect-ratio-16-9 {padding-top:calc(100% / (16 / 9));} .aspect-ratio-3-2 {padding-top:calc(100% / (3 / 2));} .aspect-ratio-4-3 {padding-top:calc(100% / (4 / 3));} /* set up the video iframes with 100% height and width, and an absolute position at left top */ .wrap iframe {width:100%; height:100%; position:absolute; left:0; top:0;}

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.


Terms and Conditions

This demonstration can be used subject to the following terms and conditions.

  1. If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
  2. You may NOT place this demonstration on another site for others to download.
  3. You may NOT redistrubute or resell this demonstration.
  4. Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
  5. Please see the Copyright statement above regarding the requirement for a support donation.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page