Doing it with style
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.
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="https://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="https://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="https://player.vimeo.com/video/118802504" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</article>
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;}
Copyright
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.
- If you wish to use this demonstration in your website(s) please email me stu{at}cssplay.co.uk seeking permission.
- You may NOT place this demonstration on another site for others to download.
- You may NOT redistrubute or resell this demonstration.
- Users agree not to remove or edit the credit notice within the stylesheet, or claim that this demonstration is their own.
- 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
CSSPLAY useful pages