用 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. 您还可以将视频在页面上左右对齐。