Vimeo 全宽

Question

我正在尝试在网页中显示全宽的 vimeo 视频。

这是它现在的样子：

如您所见，黑色是全宽但不是视频。它应该是全宽的，没有显示控件，自动播放和循环播放。

我的代码现在看起来像这样：

 <iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

客户端有 vimeo plus 但没有 vimeo pro。有人可以帮我弄这个吗。

更新：

我已将我的代码更改为：

 <style>
    .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0; overflow: hidden;
        max-width: 100%; height: auto;
    }
    .embed-container iframe, .embed-container object, .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

但我的底部和顶部仍然有黑色边框。

我创建了一个 jsfiddle，您也可以在其中看到： https ://jsfiddle.net/07fkfwz3/。您 在这里 看到的视频没有任何边框。

原文由 nielsv 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您为容器创建的魔术填充数需要与视频的宽高比相匹配。如果您检查 vimeo 上的视频，分辨率为 1296x540。要获得纵横比百分比，请除以 540 / 1296 * 100% = 41.66666667% 填充。

这是一个小提琴，因为视频似乎在 SO 沙盒中播放效果不佳。 https://jsfiddle.net/mcoker/p7q6x4d5/1/

 .embed-container {
  --video--width: 1296;
  --video--height: 540;

  position: relative;
  padding-bottom: calc(var(--video--height) / var(--video--width) * 100%); /* 41.66666667% */
  overflow: hidden;
  max-width: 100%;
  background: black;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

 <div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

原文由 Michael Coker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

试试这个

<style>
.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0; overflow: hidden;
    max-width: 100%; height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
</style>

<div class='embed-container'><iframe src='https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

编辑

所以在我看到小提琴之后，我设法像这样解决了你的问题：

CSS

         .embed-container {
      position: relative;
      padding-bottom: 56.25%;

      height: 0;
      overflow: hidden;
      max-width: 100%;
      height: auto;
    }

    .embed-container iframe,
    .embed-container object,
    .embed-container embed {
      position: absolute;
      top: 13%;
      width: 100%;
      height: 75%;
    }

HTML

 <div class='embed-container'>
  <iframe src='https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

原文由 Jesse de gans 发布，翻译遵循 CC BY-SA 3.0 许可协议