Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3
Full-size YouTube video, all aspect ratios, CSS only
TL:DR - working fiddle
As an update/improvement to @Hinrich's answer, I have created a CSS-only scaler that works for ALL aspect ratios - even the extremes. Rather than over-compensating the width to fit most screen sizes, the iframe is set using vw
and vh
and offset using the CSS transform
property (which offsets relative to the element, not the parent).
Most browsers (IE9+ and all evergreen browsers AFAIK) support the vw
and vh
units, as well as transform
s, so this should work for pretty much all browsers with no JavaScript required.
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
}
@media (min-aspect-ratio: 16/9) {
.video-background iframe {
/* height = 100 * (9 / 16) = 56.25 */
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.video-background iframe {
/* width = 100 / (9 / 16) = 177.777777 */
width: 177.78vh;
}
}
<div class="video-background">
<iframe src="https://www.youtube.com/embed/biWk-QLWY7U?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
With CSS variables
For those using CSS variables, you can also do this (fiddle), which lets you arbitrarily reuse the sizes for multiple classnames:
:root {
--video-width: 100vw;
--video-height: 100vh;
}
@media (min-aspect-ratio: 16/9) {
:root {
--video-height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
:root {
--video-width: 177.78vh;
}
}
.video-background {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.video-background iframe {
position: absolute;
top: 50%;
left: 50%;
width: var(--video-width);
height: var(--video-height);
transform: translate(-50%, -50%);
}
For a real full screen solution, this can be achieved like this:
HTML
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/I4agXcHLySs?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&mute=1" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
It is not perfect, e.g. it does not work well with extreme aspect ratios of the container, but is doing a great job in most situations. Here is a working example:
https://codepen.io/hnrchrdl/pen/YzPwjBV
Edit: Check Oliver's answer, he seems to have an improved version of this solution.
I think this is what you're trying to achieve:
.video-wrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px;}
.video-wrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
<div class="video-wrapper">
<iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&html5=1" frameborder="0" allowfullscreen></iframe>
</div>
This will give you a video that fills the container that it is in and will automatically scale the height too.
I originally found this solution here: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php