Html 全宽 vimeo 包装器背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21314206/
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
Full-width vimeo wrapper background
提问by notcho nachos
I am trying to create a full-width iframe vimeo background covered by a pattern located in my body div. The video is covered by an overlay so it becomes unclickable. Ive tried giving the video 100% width and height yet no luck on covering the screen.. I am trying to have the videos pop up at 500x250 px.
我正在尝试创建一个全宽 iframe vimeo 背景，该背景由位于我的身体 div 中的图案覆盖。视频被覆盖层覆盖，因此无法点击。我试过给视频 100% 的宽度和高度，但在覆盖屏幕时没有运气..我试图让视频以 500x250 像素弹出。
Html
html
<div class="video">
<iframe src="//player.vimeo.com/video/82123812?title=0&byline=0&portrait=0&color=3a6774&autoplay=1&loop=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="overlay"></div>
</div>
CSS
CSS
.video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%
}
.video .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../img/overlay-pattern.png) repeat;
}
回答by Christophe Marois
This solution replicates the css property background-size: cover, using an iframe instead of an image, in full CSS.
此解决方案background-size: cover在完整的 CSS 中使用 iframe 而不是图像复制 css 属性。
First, put your vimeo iframe in a wrapper:
首先，将您的 vimeo iframe 放入包装器中：
<div class="iframe-wrapper">
<iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
</div>
Then apply those styles:
然后应用这些样式：
/* Makes a fixed background wrapper
which the user cannot interact with */
.iframe-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/
.iframe-wrapper iframe {
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
min-height: 100vh;
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
In addition, in the case of Vimeo, a proaccount gives you the ability to remove the player's controls.
此外，在 Vimeo 的情况下，专业帐户使您能够删除玩家的控制。
回答by Josh Harrison
You need to set the width and height of the iframe as well as its wrapper. I've also added some z-indexes for luck!
您需要设置 iframe 及其包装器的宽度和高度。我还添加了一些 z 索引以求好运！
Hey diddle diddle, here is a fiddle: http://jsfiddle.net/n28Ef/1/
嘿diddle diddle，这是一个小提琴：http: //jsfiddle.net/n28Ef/1/
.video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.video iframe {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
.video .overlay {
position: absolute;
z-index: 2;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(../img/overlay-pattern.png) repeat;
}
