Similar to Alvaro Menendez's answer, credit needs to go to this answer stackoverflow.com/a/29997746/3400962 by Qwertman. I got as far as using the "padding percentage" trick, but this answer's clever use of viewport units is crucial to this working.
The key to implementing this behaviour is to ensure two things:
- That the
iframe always maintains the same aspect ratio as its video content 16 : 9. This will ensure that no black "padding" is present around the outside of the video
- That the
iframe always fills the height or width depending on the size of the viewport
One way to maintain the aspect ratio of an element is to use the "padding percentage" trick which takes advantage of the fact that top and bottom padding uses the width of the element as the basis for their value. Using the formula B / (A / 100) = C% we can calculate the required percentage for the padding. Given the video has a 16 : 9 ratio this translates to 9 / (16 / 100) = 56.25.
The only problem is that in your case the calculation is required for both the horizontal and vertical axis (as we don't know what dimensions the viewport will be) and this trick will not work with left and right padding to get the aspect ratio in relation to the height.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
.inner {
left: 50%;
min-height: 43.75%;
padding-top: 56.25%;
position:absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container iframe {
bottom: 0;
height: 100%;
left: 0;
position:absolute;
right: 0;
top: 0;
width: 100%;
}
<div class="container">
<div class="inner">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
https://jsfiddle.net/w45nwprn/ (Snippet doesn't show video, please see fiddle)
Luckily, in your case you want the video to fit the entire screen so viewport units can be used to calculate the aspect ratio instead of percentages. This allows use to calculate the width in relation to the height and vica versa:
left: 50%;, top: 50%; and transform: translate(-50%, -50%); are required to center the iframe in .containermin-height: 100%; and min-width: 100%; are required to ensure that the height and width are never smaller than that of .containerheight: 56.25vw; will set the height in relation to the width of the viewport. This is calculated by doing 9 / (16 / 100) = 56.25width: 177.77777778vh; will set the width in relation to the height of the viewport. This is calculated by doing 16 / (9 / 100) = 177.77777778
Because the height and width can never be below 100% but the must remain in the correct aspect ratio the video will always cover the whole viewport.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div class="container">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
https://jsfiddle.net/qk00ehdr/ (Snippet doesn't show video, please see fiddle)
Viewport units are widely supported, so as long as you are not targeting old browsers this method should work.
