Force iframe YouTube video to center fit and full cover the screen in the background using HTML5 CSS3

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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