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/ .你在这里看到的视频没有任何边框.

Answer 1

您为容器创建的魔术填充号码需要与视频的宽高比相匹配.如果您在vimeo上检查视频,则res为1296x540.要获得宽高比百分比,请将540/1296 = 41.66666667%填充除以.这是一个小提琴,因为视频似乎在SO沙箱中不能很好地播放.https://jsfiddle.net/07fkfwz3/6/

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}
		
.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>

Answer 2

替换视频的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%;
}

由于纵横比为 16:9，顶部内边距为 56.25%

Answer 3

试试这个

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