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

Answer 1

为容器创建的魔法填充数必须与视频的宽高比匹配。如果在vimeo上检查视频，则其分辨率为1296x540。要获取宽高比百分比，请将540 / 1296 * 100％ = 41.66666667％填充。

由于视频在SO沙盒中播放效果不佳，这里提供了一个fiddle链接：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

---

将 body { margin:0 } 添加到 fiddle 中进一步展示了最大宽度的完整性 :) - Ryan Wheale

你的意思是 padding-bottom: 41.66666667%;，对吗？在 JS Fiddle 代码中是这样写的，但在 SO 沙盒代码中没有。 - tanius

@tanius 是的，谢谢你发现了这个问题。我已经清理了它，并添加了 CSS 自定义属性和 calc() 来为您计算数学。 - Michael Coker

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

---

我已经尝试过这个了。但是我仍然在顶部和底部有黑色边框（更新了我的主题）。 - nielsv

可能是你的 CSS 冲突了？ - Jesse de gans

我已经更新了我的主题，并提供了一个 jsfiddle，您可以在其中查看此内容。 - nielsv

将padding-bottom的值更改为42％是否足以满足您的需求？ 同时感谢@VC.One使此评论成为可能。 - ch1ll

Answer 3

替换视频的ID号码（在本例中为19022044）

HTML：

<div class="vimeo-full-width">
   <iframe src="https://player.vimeo.com/video/19022044?title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>  

CSS：

.vimeo-full-width {
    padding: 56.25% 0 0 0;
    position: relative;
}

.vimeo-full-width iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

顶部内边距为56.25％，因为宽高比为16：9。

- Ivan Belchev

Answer 4

您可以尝试以下内容： https://jsfiddle.net/c4j73z16/4/

HTML

<div class='embed-container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&title=0&byline=1&portrait=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

css

<style>
  .embed-container {
    position: relative;
    padding-bottom: calc(70vh - 6.7em);
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .embed-container .vcontent {
    position: absolute;
    overflow: hidden;
    height: calc(70vh - 6.2em);
    width: 100%;
    margin-top: -0.5em;
  }

  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    padding: 0;
    margin: -3em 0;
  }
</style>

我使用vh高度和另一个div.vcontent，以便更好地满足您的需求。

- g.annunziata

Answer 5

这对我有用：

<style>
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

  .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/157467640?background=1' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

来源：https://forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2

- Lucas

Answer 6

HTML是

<div class='container'>
  <div class="vcontent">
  <iframe src="https://player.vimeo.com/video/208791851?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

并且在样式方面

.container {
      position: relative;
      padding-bottom: calc(70vh - 6.7em);
      height: 0;
      overflow: hidden;
      max-width: 100%;

    }
    .container .vcontent {
       position: absolute;
   overflow: hidden;
   height: calc(70vh - 6.2em);
   width: 100%;
   margin-top: -0.5em;
    }
    .container iframe,
    .container object,
    .container embed {
      position: absolute;
  overflow: hidden;
      top: 0;
      left: 0;
      width: 100%;
      height: 70vh;
  padding: 0;
  margin: -3em 0;
    }

- Ankush Verma