时间戳

首页 > 解决方案 > 背景 Vimeo 视频的行为类似于 background-size: 封面 - 不是全尺寸，但在较小的容器 div 中

javascript - 背景 Vimeo 视频的行为类似于 background-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 像素的固定高度和流体宽度

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;
  }
}

希望你能帮忙！谢谢！

标签： javascripthtmlcssvideovimeo

解决方案

嘿，我对 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%;
}

推荐阅读