html - Vimeo 全宽

标签 html css video width vimeo

<分区>

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

现在是这样的:

enter image description here

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

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

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

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

enter image description here

我创建了一个 jsfiddle,您还可以在其中看到:https://jsfiddle.net/07fkfwz3/ .还有你能看到的视频here没有任何边界。

最佳答案

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

这是一个 fiddle ,因为视频似乎在 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>

关于html - Vimeo 全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42858199/

相关文章:

html - 使用css在网格上等间距按钮

jquery - .height() .width() 不会根据尺寸变化进行调整

javascript - 未知的填充/边距不知从何而来

html - 如何在Div后台添加元素目录下的Video

html - div背景不显示

javascript - 选择一个单选按钮以显示弹出窗口并保持选中状态

android - 在 webview 中播放本地视频

android - 如何在 webview 上播放视频

javascript - 如何将 base64 解码图像添加到 openlayer map ?

css - 为 html5 表单验证/需要的弹出窗口覆盖 css