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 transforms, 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%);
}
