Question

我打算建立一个以视频为背景的网站。

我想从vimeo加载视频，但我找不到将其全屏显示的最佳方法。

我正在尝试向iframe添加一个css，但它根本不起作用：

iframe{
     width: 100%;
     height: 100%;
}

你们中的任何人都知道将它作为背景嵌入的最佳方法，而不使用插件或html5来避免IE出现问题。

谢谢你！

Answer 1

在这里：Demo

将其包裹在div中并将其设置为100％，100％

iframe, div {
     width: 100%;
     height: 100%;
}

Answer 2

HTML：

<iframe src="vimeo.path"></iframe>
<div id="container"></div>

CSS：

body {
    overflow: hidden;
}
iframe {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
#container {
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
}

样本：

http://jsbin.com/utezov/4/embed?live

Answer 3

<iframe src="http://player.vimeo.com/video/47922974" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/47922974">Jape 'Scorpio'</a> from <a href="http://vimeo.com/fergalbrennan">Fergal Brennan</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

现在我刚从vimeo拍了一段视频。也许像

那样为iframe设置一个类

<iframe class="fullvideo">

并将css设置为：

iframe.fullvideo {
width: 100%;
height: 100%;
}

Answer 4

尝试使用ID来识别此bg iframe：

<iframe id="bgiframe">...</iframe>

并以这种方式重新定义此iframe：

html, body, p, div, span, table, td 
/* Add other elements... These are explicit defined since ie6/7 doesn't support * selector */ 
{
   z-index: inherit;
   background: transparent; /* this is important to see-through normal elements */
}

#bgiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding 0;
    margin: 0;
    border: 0;
    width: 100%; height: 100%;
    z-index: -1;
}

z-index: -1;用于将此元素置于其他所有元素之下。每个其他元素的background: transparent;都是透视并将视频视为背景。

这可以是一个例子： http://jsfiddle.net/4KHET/2/

Vimeo iframe作为背景

4 个答案: