我正在寻找一种HTML和CSS方式来显示这个嵌入视频作为75vh高度的英雄背景 .
现在，iFrame保留了他的 width: 100% 和他的 height: 75vh 但是图像本身并没有覆盖整个 Headers 宽度 .
Actually, I need it to behave like a background-size: cover property .
这是一个快速附加的jsfiddle来说明这个问题，最好的方法是看它是在一个新的选项卡中 .
https://jsfiddle.net/wollsale/9yrvLy72/
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>
EDIT
本文解释了如何仅使用HTML和CSS来“裁剪”视频以使其覆盖整个视口 .
https://fvsch.com/code/video-background/
通过这个伟大的codepen看到它的实际效果
https://codepen.io/cvn/pen/WbXEoX?q=youtube object fit＆limit = all＆type = type-pens
1 回答
本文解释了如何仅使用HTML和CSS来“裁剪”视频以使其覆盖整个视口 .
看到它与这个伟大的
codepen行动