需求：視頻在一個div中自動播放並作爲背景，該視頻必須完全填充在該div中，視頻不能溢出div，
HTML中加入視頻很簡單加一個<video> </video>即可
現在要設置視頻爲背景，上層還有圖片、文字、等；
視頻width、height大小和所存放視頻的div設置的width、height大小不同，視頻可能會出現不是理想的效果
比如：
這時視頻width和weight設置爲100%，已經到達視頻原有的最大尺寸，但是還無法完全覆蓋我們的div，所以現在要設置視頻Video的屬性和其父級DIV的屬性：
.video_back {
/*設置視頻最小寬度和高度 這個設不設置沒有什麼影響 */
/*min-width: 100%;
min-height:100%;*/
/**/
width: 100% !important;
height: 100%;
/*生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。可以根據實際情況修改*/
position: absolute;
/*這裏我試了一下好像只要是矩形的四個角的的點都行,也就是說right:0;bottom:0;也可以*/
left: 0;
top: 0;
/*將視頻放在元素的堆疊順序最底層，以防覆蓋其他東西*/
z-index: -9999;
/*被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那麼該對象將被拉伸以適應內容框。*/
object-fit: fill;
}
#parent{
position:absolute;
}
幾個重要的設置：
- 視頻樣式中的：position:absolute；這是讓視頻相對於父級div生成絕對定位；
- z-index：-9999；這是讓視頻在堆疊順序的最底層，作爲背景；
- object-fit：fill；視頻完全填充到div中的關鍵！！！！
- 父級設置樣式position:absolute 生成相對定位的元素，相對於其正常位置進行定位。
視頻其他小屬性
- muted 靜音播放
- autoplay=autoplay；打開時自動播放；
- loop=loop；循環播放
- constrol 不顯示視頻播放框
最終效果：
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>視頻背景網頁</title>
<style type="text/css">
.video_back {
/*設置視頻最小寬度和高度*/
/*min-width: 100%;
min-height:100%;*/
/**/
width: 100% !important;
height: 100%;
/*生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。可以根據實際情況修改*/
position: absolute;
/*這裏我試了一下好像只要是矩形的四個角的的點都行,也就是說right:0;bottom:0;也可以*/
left: 0;
top: 0;
/*將視頻放在元素的堆疊順序最底層，以防覆蓋其他東西*/
z-index: -9999;
/*被替換的內容正好填充元素的內容框。整個對象將完全填充此框。如果對象的寬高比與內容框不相匹配，那麼該對象將被拉伸以適應內容框。*/
object-fit: fill;
}
#parent{
position:absolute;
}
.wen {
font-size: 30px;
color: #fff;
}
</style>
</head>
<body>
<div class="parent" style="width:1920px;height:1080px;">
<!--
autoplay autoplay如果出現該屬性，則視頻在就緒後馬上播放。
controls controls如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop loop如果出現該屬性，則當媒介文件完成播放後再次開始播放。
muted muted規定視頻的音頻輸出應該被靜音。
poster URL 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。
preload preload
如果出現該屬性，則視頻在頁面加載時進行加載，並預備播放。
如果使用 "autoplay"，則忽略該屬性。
src url要播放的視頻的 URL。
width pixels設置視頻播放器的寬度。
height pixels設置視頻播放器的高度。-->
<video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">
您的瀏覽器不支持
</video>
<div class="wen">這是視頻的上浮文字</div>
</div>
</body>
</html>