29

How do you force HTML5 iframe YouTube video to center fit, cover the full-screen window background using CSS3 HTML eventually Java?

As for example "paypal.it" home page background or "unity3d.com/5" top video, has as iframe youtube video. The iframe covers the full screen (zooming) and covers all the width and height when re-size the window. It re-size maintaining the 100% min-width zooming the height or the 100% min-height zooming the width.

How is this effect achieve using iframe HTML5 and CSS3?

Code Example HTML5

<div class="video" style="opacity: 1;">

    <iframe src="http://www.youtube.com/embed/AddHereVideoId?autoplay=1&amp;html5=1" frameborder="0" style="height: 720px;">
     </iframe>

</div>

Code CSS3 HTML eventually Java help would be appreciated.

Andhi Irawan
  • 456
  • 8
  • 15
Alan Mattano
  • 860
  • 3
  • 14
  • 22

3 Answers3

59

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%);
}
Oliver
  • 2,930
  • 1
  • 20
  • 24
  • 5
    You're a genius! Why does this not have more votes?? – iamkeir May 18 '20 at 17:35
  • This is simply perfect – T-moty Jul 31 '20 at 15:11
  • 1
    @Oliver, in F11/Fullscreen mode on Windows 10 Chrome Browser, the video becomes 20% zoomed in when going into this fullscreen mode. Any idea on how to fix it? Thanks so much. – Paul McBurney Oct 18 '20 at 16:22
  • @PaulMcBurney at a guess I'd assume you have a small 4:3 or 16:10 screen, but outside fullscreen mode the browser address bar brings the inner window to closer to 16:9. In full-screen, the video zooms to fit the 4:3 aspect ratio? Does this happen on any other browser for you? – Oliver Oct 19 '20 at 11:34
  • Sorry for the late reply Oliver.. still fixing this problem. It happens on Windows and Edge, Firefox is fine. – Paul McBurney Oct 23 '20 at 07:30
  • I have no idea why this worked, but it did. Simply magic – Florian Müller Aug 09 '22 at 23:37
  • For my needs I modified `.video-background` to `height: 100%;` so if the page can be scrolled and 100vh is less than 100%, the video will be still as a cover inside the div. – 5ulo May 24 '23 at 15:15
22

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.

Hinrich
  • 13,485
  • 7
  • 43
  • 66
  • 1
    Just an FYI, this doesn't work when placed inside a carousel or something that's moving - the outer fixed element will bring headaches. – JCraine Apr 17 '18 at 05:33
  • @JCraine Works fine for me inside a carousel. Just make sure you've got a set height for your carousel slides and the video area is an inner container with the specified attributes from this demo. I am using the Glide.js plugin and it works great! – Hellodan Aug 19 '18 at 17:59
  • @Hinrich, hey there. Two years later I have a problem. – Paul McBurney Oct 17 '20 at 16:35
  • @Hinrich, when you go into F11/Fullscreen mode on Windows 10 Chrome, the video gets zoomed in by 20% in this solution.. decreasing the field of view and video quality. Anyone have ideas on how to fix it? – Paul McBurney Oct 17 '20 at 16:35
  • Perfect... well, nearly. After recent Youtube changes, the loop doesn't work anymore without adding `&playlist=` to the end of the url. The VIDEO_ID in the example above would be "I4agXcHLySs". After adding that... Perfect. – cjn Aug 07 '21 at 05:21
4

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&amp;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

Sam Willis
  • 4,001
  • 7
  • 40
  • 59
  • 1
    This gives full screen width, but it does not zoom in, so it is not complete fullscreen for me. – Hinrich Mar 06 '18 at 07:42
  • What do you mean by "does not zoom in"? – Sam Willis Mar 06 '18 at 09:08
  • It is not really fullsize, that means there is a border around the video. it scales to width or height, but not both at the time. – Hinrich Mar 06 '18 at 09:46
  • 1
    You need to change the `padding-bottom` of the wrapper to match the aspect ratio of the video being used. The example code is for a video at 16:9 but if you are using a video with a different ratio, then it will need calculating. See here for advice on calculating ratios: https://css-tricks.com/aspect-ratio-boxes/ – Sam Willis Mar 06 '18 at 09:59