Youtube iframe - zoom to fill the whole space

Question

I want to create a sort of banner in my webpage with a youtube video as background that should occupy the entire iframe from side to side (stretching the video and losing some pieces would be ok). Something like background-size: cover; would do. I tried this but it's not really working (i can only see a really small stripe of video) in my case, probably because the format of my iframe is a little bit extreme.

<header id="banner">
    <div class="overlay">
        <iframe src="https://www.youtube.com/embed/N9Y86YCRRDg?&amp;autoplay=1&amp;loop=1&amp;playlist=N9Y86YCRRDg&amp;rel=0&amp;controls=0&amp;mute=1" width="100%" height="315"></iframe>
    </div>
</header>

I pasted your source into their snippet and it worked for me, except where the content was clipped in the video frame — Tim Ogilvy, Jun 04 '19 at 14:42
How big do you want this video banner to be? Pixels or percent of the page? — Tim Ogilvy, Jun 04 '19 at 15:07
So you'll need to make the percentage overflow in the media queries much much bigger... and maybe use one more wrapper. I'll try and come back to this tomorrow once I get some sleep. Good luck! — Tim Ogilvy, Jun 04 '19 at 15:24

score 2 · Answer 1 · answered Jun 04 '19 at 14:48

This works in codepen using the example you provided, although some of the footage is clipped in the video (frame effect);

html

  <div class="video-background">
    <div class="video-foreground">
      <iframe src="https://www.youtube.com/embed/N9Y86YCRRDg?&amp;autoplay=1&amp;loop=1&amp;playlist=N9Y86YCRRDg&amp;rel=0&amp;controls=0&amp;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; }
}

if you reduce the height of the iframe you'll notice that from a certain point the video is not covering the whole iframe anymore — Alessandro Gaballo, Jun 04 '19 at 14:51

Youtube iframe - zoom to fill the whole space

1 Answers1