0
我在寻找一个HTML & CSS方式来显示这个嵌入视频作为一个75vh高度的英雄背景。全宽Youtube嵌入英雄背景视频
现在，iFrame保留他的width: 100%和他的height: 75vh，但其中的图像不覆盖整个标题宽度。
其实，我需要它像一个background-size: cover财产。
这里是一个快速附加的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只是一种 “作物” 的视频，使其覆盖到整个视。
与这个伟大的codepen
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens
这里codepen链接，可能会帮助您https://codepen.io/dudleystorey看到它在行动/ pen/PZyMrd？editors = 0100 – amyogiji
我已经尝试过这个解决方案，但它适用于完整的页面e背景视频。我需要它的英雄背景视频，iFrame封面完整的widh＆高度，但图像是由黑色边框圆形。它更像是一个'background-size：contain'而不是'background-size：cover'行为:) –
其实我只是偶然发现这个帖子： > https://codepen.io/cvn/pen/WbXEoX?q= youtube + object + fit＆limit = all＆type =类型笔 它的功能就像一个魅力。我甚至不知道如何，但我会花一点时间来了解所有这些逻辑，并会对我自己的问题发表一个答案！ –