在全屏視頻下添加內容 - 定位

我希望在整頁視頻下添加內容。但是，添加內容時，內容會填滿視頻而不是下面。在全屏視頻下添加內容 - 定位

所以，找什麼IM是：

enter image description here

但相反我得到了視頻中的文字：jsFiddle

HTML

<div id="video-container"> 
<video id="bgVid" loop class="fillWidth" autoplay poster="<?php echo bloginfo('template_directory') . '/images/ship-bg.jpg'; ?>" alt="ship cargo"> 
<source src=video/science.mp4 type=video/mp4> 
</video> 
</div> 

<div id="underneath"> 
<p style="color:#fff">content underneath</p> 
</div>

CSS

#video-container { 
    position: absolute; 
} 
#video-container { 
    top:0%; 
    left:0%; 
    height:100%; 
    width:100%; 
    overflow: hidden; 

} 
video#bgVid { 
    position:absolute; 
    z-index:-1; 
    background: url('../images/ship-bg.jpg') no-repeat; 
    background-size: cover; 
    transition: 1s opacity; 
} 
video#bgVid.fillWidth { 
    width: 100%; 
}

我嘗試過，玩過並失敗過。任何人都可以請指教。

JSFiddle

非常感謝。

來源

2015-03-03 user2538833

試試這個，

#video-container { 
    position: relative; 

}

Demo

來源

2015-03-03 13:30:54 Logz

謝謝，這似乎工作到一個點。但視頻不再適合屏幕。 – user2538833 2015-03-03 14:09:52

@ user2538833：檢查http://jsfiddle.net/UI_Designer/20ropLz3/15/視頻適合屏幕... – Logz 2015-03-04 03:53:24

試試這個

#underneath{ 
position:relative; 
z-index:-2; 
}

來源

2015-03-03 12:37:54 Symfony

對不起，我的英語不好。不在下面但在下面。所以視頻在頂部和直接下面的內容。 – user2538833 2015-03-03 12:50:51

在全屏視頻下添加內容 - 定位

回答

相關問題