Question

我想在我的网页中创建一种横幅，以youtube视频作为背景，该横幅应该左右占据整个iframe（拉伸视频并丢失一些片段是可以的）。像background-size: cover;这样的事情就可以了。我尝试过this，但就我而言，它实际上并没有用（我只能看到非常小的视频条），可能是因为iframe的格式有点极端。

<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>

Answer 1

使用您提供的示例，这在codepen中有效，尽管某些素材已在视频中裁剪（帧效果）；

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

YouTube iframe-缩放以填充整个空间

1 个答案: