背景 Vimeo 视频的行为类似于 background-size:cover - 不是 FULL SIZE,而是在较小的容器 div

问题描述

我现在已经浏览了很多关于这个主题的话题,但我能找到的只是如何在全屏上解决这个问题。那么..如何将 Vimeo 视频 iframe 嵌入到具有任意大小(不是全尺寸!)的容器中,使其行为类似于 CSS background-size:cover。所以基本上它会溢出 Y 或 X。我还想将视频放在容器中。

这是我的代码

<figure class="video-background ">
    <iframe src="https://player.vimeo.com/video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>

我的视频背景 div 具有 400 像素的固定高度和可变宽度


This answer from Oliver 展示了如何在全屏上执行此操作,但如何在较小的 div 上模拟此行为?他的解决方案如下所示:

.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%,-50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

希望能帮到你!谢谢!

解决方法

我不确定您在使用 iframe 时是否能够做到这一点。 vimeo (和大多数其他网站) 中视频的样式根据容器的大小计算视频的宽度和高度,以防止溢出。

如果 iframe 来自单独的域,则跨站点源中的安全更改可防止篡改 iframe 中的内容(这是必需的)

如果您真的想这样做,您可以从您自己的域中获取视频并轻松操纵溢出。

就目前而言,您只能操作 iframe 标记,您可以将其包含在如下所示的包装器中,但由于 iframe 中的子类我不在下面,您将能够创建溢出。

.video-background {
  display: flex;
  height:400px;
  background:#555;
}

.video-background iframe {
  flex: 1;  
}
<figure class="video-background ">
  <iframe src="https://player.vimeo.com/video/364558071?background=1&api=1&loop=1&title=0&byline=0&portrait=0&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</figure>

,

嘿,我对 SO 太新,无法发表评论,所以我实际上无法要求更多说明,哈哈。我想我有一个解决方案给你。 Vimeo 有一个 API,可以使他们的视频具有响应性。使用它,您可以执行以下操作:

     <div class="video">    

   In the div below I've changed your iframe to to include the Vimeo API script and allowed the video to be responsive.

  <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/364558071?autoplay=1&loop=1&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
   
    <div class="overlay">
      <p>If you want to overlay text you can add it here</p>
    </div> 
</div>



        .video {
        position: absolute;
        left: 0;
        top: 0;
         /*  Change the two values below to meet your requirements  */
        width: 50vw; 
        height: 100vh;
    }
    
    .video iframe {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    
/* If you want the overlay text style it here */

.video .overlay {
    font-size: 35px;
    position: absolute;
    text-align: center;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
}