bigvideo.js - 在bigvideo容器之上和之下堆叠DIV

Question

所以我开始玩bigvideo.js（它建立在video.js之上），并且它适用于在整个屏幕上拥有固定背景视频的基本用法。我还设法在div中显示它。

我的问题是，我似乎无法将其他DIV与bigvideo.js容器div之上或之下的其他内容堆叠起来，而我似乎无法弄清楚如何解决这个问题。 / p>

我的HTML：

<div style="float: left; width: 100%; height: 300px;">
<h1>hi there</h1>
</div>

<div style="float: left; width: 100%; height: 500px;" id="intro-video-container">
</div>

JS解雇bigvideo：

$(function() {

    var BV = new $.BigVideo({container: $('#intro-video-container'),useFlashForFirefox:false});
    BV.init();
    BV.show('intro.mp4',{ambient:true});
});

所以视频容器div ALWAYS会被卡在身体的左上方，无论我是否尝试用margin-top强制它，或者在它之前放置div等等。

有什么想法吗？

Answer 1

尝试在您要放置所需内容的页面中使用容器div（所谓的换行）（如插件example页面所示）：

<强> CSS

.box { 
    background:#444; background:rgba(0,0,0,.6);
    padding:20px;
    border-radius:5px;
    margin-bottom:20px;
}
.main {
    position:relative;
    margin:50px 50px 440px 220px;
    min-width:300px;
    -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;
}

.dimmed {
   color: #ccc;
}

#big-video-wrap {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}

<强> HTML

 <div id="big-video-wrap"></div>

 <div class="main">
     <div id="overview" class="box">
        <h1>BigVideo<span class="dimmed"><small>.</small>js</span></h1>
        <h2>Simple Ambient Video Example</h2>
     </div>
 </div>

<强>的JavaScript

$(function() {

    var BV = new $.BigVideo({container: $('#big-video-wrap'),useFlashForFirefox:false});
    BV.init();
    BV.show('intro.mp4',{ambient:true});
});

修改

现在，您更清楚自己要实现的目标，最简单的解决方案是在iframe上添加div，指向您的全屏视频页面。 即创建包含所有初始化和插件的页面video.html，然后将其用作主页上iframe的来源。您的iframe可以设置为与所需尺寸相匹配（例如100％宽度和300px高度）。

Answer 2

更新，以下是我要实现的目标的说明：