Html Vimeo 全宽
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42858199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vimeo full width
提问by nielsv
I'm trying to have a vimeo video shown full width in web page.
我正在尝试在网页中显示全宽的 vimeo 视频。
This is how it looks now:
这是它现在的样子：
As you can see the black is full width but not the video. It should be full width, no controls shown, play automatic and play in a loop.
如您所见，黑色是全宽，但不是视频。它应该是全宽的，没有显示控件，自动播放并循环播放。
My code looks like this now:
我的代码现在看起来像这样：
<iframe src="https://player.vimeo.com/video/208176323?autoplay=1&loop=1&background=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The client has vimeo plus but not vimeo pro. Can someone help me with this.
客户端有 vimeo plus 但没有 vimeo pro。有人可以帮我弄这个吗。
UPDATE:
更新：
I've changed my code to this:
我已将代码更改为：
<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>
But I still have black border on bottom and top.
但我的底部和顶部仍然有黑色边框。
I've created a jsfiddle where you can also see this: https://jsfiddle.net/07fkfwz3/. And the video that you can see heredoesn't have any borders.
我创建了一个 jsfiddle，您也可以在其中看到：https://jsfiddle.net/07fkfwz3/ 。您可以在此处看到的视频没有任何边框。
回答by Michael Coker
The magic padding number you create for the container needs to match the aspect ratio of the video. If you inspect the video on vimeo, the res is 1296x540. To get the aspect ratio percentage, divide 540 / 1296 * 100% = 41.66666667% padding.
您为容器创建的魔术填充数字需要与视频的纵横比相匹配。如果您在 vimeo 上检查视频，则分辨率为 1296x540。要获得纵横比百分比，除以 540 / 1296 * 100% = 41.66666667% 填充。
Here's a fiddle since the video doesn't seem to play well in the SO sandbox. https://jsfiddle.net/mcoker/p7q6x4d5/1/
这是一个小提琴，因为视频在 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>回答by Jesse de gans
Try this
尝试这个
<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>
Edit
编辑
So after i saw the fiddle i managed to fix your problem like so:
所以在我看到小提琴后，我设法解决了你的问题：
CSS
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
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>
回答by g.annunziata
You can try this: https://jsfiddle.net/c4j73z16/4/
你可以试试这个：https: //jsfiddle.net/c4j73z16/4/
html
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
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>
I use vhheights and a further div.vcontent, to move properly to better matches what you need.
我使用vh高度和更远的div.vcontent, 来正确移动以更好地匹配您的需要。
回答by Ankush Verma
HTML is
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>
and in styling
并且在造型上
.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;
}
回答by Lucas
This worked for me:
这对我有用：
<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>
Source: https://forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2
来源：https: //forum.webflow.com/t/setting-vimeo-video-to-full-width-of-div/25499/2
回答by Ivan Belchev
Replace the ID number of the video (in this case 19022044)
替换视频的 ID 号（在本例中为 19022044）
HTML:
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:
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%;
}
The top padding is 56.25% because of aspect ratio 16:9
由于纵横比 16:9，顶部内边距为 56.25%
