Mobile Friendly Website

CSSPLAY

Doing it with style

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

Date : 1st February 2015

For all the latest browsers, Android and iOS



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


Information

NOTE this only works with videos that ONLY have 'play' and 'pause' controls as it crops the left and right edges of video controls when they are placed at the bottom of the video.

This is a method of converting aspect ratios of responsive videos using ONLY CSS and still keep the converted videos responsive. No need to use video conversion software or jQuery/javascript.

The CSS makes full use of the calc() function to calculate the width, height and offset for the new aspect ratio and will work in all modern browsers and operating systems. It also makes use of the fact that top and bottom padding can be specified as a percentage, and this is a percentage of the width of the element.

There is a further benefit, using this method, in that you can manipulate the 'offset left' (cropped) area to keep video interest centered.

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. My origininal video has an aspect ration of 16:9

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

Cascading Style Sheet

The demonstration make heavy use of the CSS calc() function to calculate the width, height and offset for each aspect ratio.

/* set up the outer percentage width */
.parent {width:95%; margin:50px auto;}
.parent h5 {padding:0; margin:0; font:normal 16px/24px verdana, arial, sans-serif; color:#666;}

/* set the 'wrap' with a percentge bottom margin so that this is repsonsive */
.wrap {position:relative; width:100%; height:0; margin-bottom:10%; overflow:hidden;} /* use overflow:hidden to crop the left and right overlap of the resized video */
/* calcuate the height of the 'wrap' depending on the aspect ratio required */
.ratio-16-9 {padding-top:calc(100%/(16/9));} 
.ratio-3-2  {padding-top:calc(100%/(3/2));}
.ratio-4-3  {padding-top:calc(100%/(4/3));}

.ratio-16-9 iframe {width:100%; height:100%; position:absolute; top:0; left:0;} /* as the original video has the aspect ratio 16:9 the width and height of the iframe is 100% */
/* the new width is the new height * the original apect ratio */
/* the left position is the (wrap width - the new width) divided by 2 */
.ratio-3-2 iframe {width:calc((100%/(3/2)) * (16/9)); height:100%; position:absolute; top:0; left:calc((100% - ((100%/(3/2)) * (16/9))) / 2);} 
.ratio-4-3 iframe {width:calc((100%/(4/3)) * (16/9)); height:100%; position:absolute; top:0; left:calc((100% - ((100%/(4/3)) * (16/9))) / 2);}

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