Vimeo iframe作为背景[重复]答案

【问题标题】：Vimeo iframe as background [duplicate]Vimeo iframe作为背景[重复]
【发布时间】：2012-11-02 00:29:37
【问题描述】：

我要制作一个以视频为背景的网站。

我想从 vimeo 加载视频，但我还没有找到全屏播放的最佳方式。

我正在尝试将 css 添加到 iframe，但它根本不起作用：

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

你们有谁知道不使用插件或 html5 将其作为背景嵌入以避免 IE 问题的最佳方法。

谢谢！

【问题讨论】：

可能，但它与我的问题无关
stackoverflow.com/questions/5867985/iframe-auto-100-height/…

标签： javascript jquery html css ajax

【解决方案1】：

给你：Demo

将其包装在一个 div 中并将其设置为 100%、100%

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

【讨论】：

@fxg 没问题 ^_^ 乐于助人！

【解决方案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

【讨论】：

@Neal 会，但后台的 iframe 不会；)
我收到“此页面不在此处”消息。
您的演示现在有一个 DIV 覆盖 iframe...您无法停止视频或视频上的任何其他内容....
@Neal Af 问题指出has a video as a background imo 这意味着 iframe 上有一个覆盖的 div/content-holder。

【解决方案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%;
}

【讨论】：

【解决方案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/

【讨论】：