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

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

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

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

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

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

谢谢!

【问题讨论】:

标签: 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/

    【讨论】:

      猜你喜欢
      • 2016-02-14
      • 1970-01-01
      • 2016-12-08
      • 1970-01-01
      • 2018-08-19
      • 2019-10-10
      • 2014-09-22
      • 2014-02-14
      • 1970-01-01
      相关资源
      最近更新 更多