全宽vimeo包装背景

本文介绍了全宽vimeo包装背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图创建一个全方位的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/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;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/n28Ef/1/

Hey diddle diddle, here is a fiddle: jsfiddle/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; }