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

问题

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 cover full screen (zooming) and cover 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.

回答1:

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/anon/pen/zRVLGJ

回答2:

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

来源：https://stackoverflow.com/questions/24579785/force-iframe-youtube-video-to-center-fit-and-full-cover-the-screen-in-the-backgr

标签

html

css

video

background

youtube-iframe-api