响应式全屏YouTube视频,没有黑条?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (18)

我在我的网站上嵌入了全屏YouTube视频。

当浏览器的大小与视频的宽度和高度成比例时,它看起来很好。但是,当我将浏览器的大小调整为不同的比例时,我会在视频周围看到黑条。

我想要的是让视频始终填满整个窗口,但没有任何拉伸。当浏览器大小与视频不成比例时,我希望隐藏“多余”。

我想要实现的是你可以在这两个网站的背景中看到的:http//ginlane.com/http://www.variousways.com/

是否可以使用YouTube视频执行此操作?

提问于
用户回答回答于
用户回答回答于

为了模拟相同的效果,重要的是保持16:9的纵横比。

HTML

<div class="banner-video">    
        <iframe  src="https://www.youtube.com/embed/XXlJXRXJhow?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;mute=1&amp;loop=1&amp;playlist=XXlJXRXJhow" frameborder="0" allow="autoplay; encrypted-media" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
</div>

CSS

iframe{
  width: 100%;
  height: calc((100vw*9) /16);
}

这将删除黑条。

现在我们可以将外部容器设置为100%宽度和100%高度并隐藏溢出。

.banner-video{
  height: 100vh;
  overflow: hidden;
}

现在上面的代码将一直有效,直到视口宽高比大于16/9。所以我们必须根据宽高比添加媒体查询。

 @media (max-aspect-ratio: 16/9) {
    .banner-video{
      width: 100%;
      overflow: hidden;
    }

    iframe{
      width: calc((100vh*16)/9);
      height: 100vh;
      }
  }

在此之后,YouTube视频将在所有条件下保持完整的视口大小,并隐藏视频的额外部分。除了Opera以外,所有浏览器都支持它。

扫码关注云+社区

领取腾讯云代金券