如何在項目目錄中添加視頻Div

我有一個div，在其中我想添加視頻在背景中就像圖像，但我沒有得到如何做到這一點..這裏是CSS我在哪裏要添加的視頻..如何在項目目錄中添加視頻Div

.page-section { 
    width: 100%; 
    min-height: 800px; 
    padding: 50px 0; 
    border-bottom: 2px solid #fff; 
} 

.page-section#intro { 
    min-height: 400px;  
}

這裏是HTML DIV ..

<div class="page-section"> 
</div>

我嘗試添加視頻這樣的，但它不工作..

.page-section#intro { 
min-height: 400px; 
background: url(Video/Sapno.MP4) bottom center no-repeat; 
}

請幫我把css的視頻添加到Div的背景中..

來源

2014-10-07 Hansal Mehta

有一個look..http：//stackoverflow.com/questions/3800813/video-as-site-background-html-5 – 2014-10-07 05:04:49

@Maddy我試過了聯繫，但我不能夠做到這一點..請能幫助我 – 2014-10-07 05:25:08

視頻網址看起來很可疑。確定它是正確的？ – Wold 2014-10-07 05:47:20

@Hansal，我不認爲background屬性接受視頻作爲有效的網址。他們只能將位圖，SVG圖像，顏色和漸變作爲值 - 通過將其強制置於其他HTML元素後面，可以僞造背景視頻的外觀。有一個稱爲z-index的propery，它負責處理頁面上元素的「深度」。

你可以嘗試這樣的事情（在HTML5簡單video標籤）：

<video autoplay loop poster="foobar.jpg" id="bgvid"> 
<source src="foobar.webm" type="video/webm"> 
</video>

你可以樣式的video標籤是這樣的：

video#bgvid { 
position: fixed; right: 0; bottom: 0; 
min-width: 100%; min-height: 100%; 
width: auto; height: auto; z-index: -100; 
background: url(foobar.jpg) no-repeat; 
}

這裏，css的重要組成部分被將此元素的z-index設置爲-100，確保它保留在背景中，以允許其他元素位於其上。您可以嘗試使用相應的html元素的類似方法。希望能幫助到你。

來源

2014-10-07 05:45:21

行..我有你的觀點。有一點澄清，我怎樣才能設置'<視頻'標籤的高度..請幫助我..因爲目前我使用的是全屏播放，而我希望它與高度只有4pppx – 2014-10-07 06:01:08

@HansalMehta，你可以像'html'元素一樣設置'video'標籤的高度。在我提供的'css'中，我設置了'min-width'和'min-height'。您可以修改它以滿足您的需求。如果它對你有用，那麼請將答案標記爲已接受，以便其他人也可以從中受益。謝謝 – 2014-10-07 06:03:02

好吧，我通過增加'最小高度：70％;'做了它，但現在我的視頻正在從底部減少/削減我不想要..如何避免它，並顯示完整的視頻70％ ..請幫助 – 2014-10-07 06:34:16

試試吧。

DEMO

.page-section video{ 

position: fixed; 
right: 0; 
bottom: 0; 
top:0; 
width: auto; 
min-width: 100%; 
height: auto; 
min-height: 100%; 
z-index: -100; 
background-size: cover; 

}

來源

2014-10-07 05:51:28

如何在項目目錄中添加視頻Div

回答

相關問題