Question

我正在寻找HTML＆amp; CSS方式将此嵌入视频显示为75vh高度的英雄背景。

目前，iFrame保留了width: 100%和他的height: 75vh，但图片本身并不覆盖整个标题宽度。

实际上，我需要它表现得像 background-size: cover 属性。

这是一个快速附加的jsfiddle来说明这个问题，最好的方法是在新标签中看到它。

https://jsfiddle.net/wollsale/9yrvLy72/

PS：我知道有很多文章在谈论这类问题，但我没有找到适合我的解决方案。

＆＃13;

body {
  background: #aaa;
  margin: 0;
  padding: 0;
  height: 2000px;
}

body {
  background: #aaa;
  margin: 0;
  padding: 0;
  height: 2000px;
}

header {
  background: #ddd;
  height: 75vh;
  width: 100%;
}

.video__wrapper {
  position: relative; padding-bottom: 53.25%; /* 16:9 */  padding-top: 25px;
}

.video__inner {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   min-height: 100%;
}

＆＃13;

<body>
  <header>
    <iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
  </header>
  
  <main></main>
  
</body>

＆＃13;

修改

本文解释了如何使用HTML＆amp; CSS仅适用于＆＃34; crop＆＃34;视频，以使其覆盖整个视口。

https://fvsch.com/code/video-background/

使用这个优秀的编码器

查看它的实际操作

https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens

Answer 1

本文解释了如何使用HTML＆amp; CSS仅用于“裁剪”视频以使其覆盖整个视口。

https://fvsch.com/code/video-background/

使用这个出色的codepen

查看它的实际效果

https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens

全宽Youtube嵌入英雄背景视频

1 个答案: