我正在寻找一种 HTML 和 CSS 方式来将此嵌入视频显示为 75vh 高度的英雄背景。
目前，iFrame 保持他的 width: 100% 和他的 height: 75vh 但图像本身并没有覆盖整个标题宽度。
实际上，我需要它表现得像一个 background-size: cover property。
这是一个快速附加的 jsfiddle 来说明这个问题，最好的查看方式是在新选项卡中。
PS:我知道有很多文章都在讨论这类问题，但我没有找到适合我的解决方案。
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%;
}<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>编辑
本文解释了如何仅使用 HTML 和 CSS 来“裁剪”视频以使其覆盖整个视口(viewport)。
使用这个出色的代码笔查看它的实际效果
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
最佳答案
本文解释了如何仅使用 HTML 和 CSS 来“裁剪”视频以使其覆盖整个视口(viewport)。
使用这个出色的 codepen 查看它的实际效果
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
关于html - 全宽 Youtube 嵌入英雄背景视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45714776/