用vimeo视频覆盖容器

Question

简短的问题，有没有办法覆盖整个iframe与固定的高度和全宽?

我不能让它与标准视频源和视频标签一起工作，但不能与Iframe一起工作。

<div class="video-container">
<iframe src="https://player.vimeo.com/video/1084537?h=b1b3ab5aa2"></iframe>

<div class="headline">
<h1>Lorem dolor</h1>
<h2>Lorem dolor ipsuim si<br />Lorem dolor ipsum lorem</h2>
</div>
</div>

<style>

.video-container {
height: 500px;
width: auto;
position: relative;
object-fit: cover;
}

.video-container iframe {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
}


.video-container .headline{
color: #fff;
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
top: 50%;
transform: translateY(-50%);
}

.video-container .Headline H1, H2{ /* headline and subheading */
color: #ffffff;
}

</style>

Answer 1

检查这个，

创建固定高度和宽度。

<div style='width:100%;border:3px solid #ddd;padding:10px'>
<div style='display:flex;justify-content:center'>
<div style=" overflow: hidden;  border: solid 12px rgb(177, 10, 10); width:594px; height:332px;">
<iframe src="https://player.vimeo.com/video/1084537?h=b1b3ab5aa2/" scrolling="no" style="
height: 335px ; border: 2px solid;
width: 593px ;    ">
</iframe>
</div>
</div>
</div>

视频封面

<div>
<iframe src="https://player.vimeo.com/video/1084537?h=b1b3ab5aa2/" scrolling="no"
style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none;   overflow:hidden; z-index:999999;" >
</iframe>

</div>

1. 根据需要改变宽度和宽度
2. 您还可以将视频在页面上向左、向右或居中对齐。