全宽vimeo包装背景 [英] Full-width vimeo wrapper background
问题描述
我试图创建一个全方位的iframe vimeo背景覆盖的模式位于我的身体div。视频由重叠式广告覆盖,因此无法点击。我试图给视频100%的宽度和高度,但没有运气覆盖屏幕..我想让视频弹出500x250像素。
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.
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
.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;
}
推荐答案
和iframe的高度及其包装器。我也添加了一些z指数运气!
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!
嘿diddle diddle,这里是一个小提琴: http ://jsfiddle.net/n28Ef/1/
Hey diddle diddle, here is a fiddle: 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;
}
这篇关于全宽vimeo包装背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!