使用video標簽，視頻總不能占滿父級全屏，本來預算的10分鍾工程，結果卡在video這里了，勤奮的小果，還是打算記下來，共勉。。。
代碼（css內容）：
<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 100%;
width: 80%;
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
}
</style>
代碼（body內容）
<body>
<p>視頻</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">視頻</video>
</div>
</body>
</html>
我們按照常規給video標簽設置：height：100%；width：100%；
結果如下：
左圖：(Google Chrome)高度達到100%；而寬度不能達到100%； 右圖：(Firefox)高度不能達到100%；而寬度達到100%；
左圖：(Safari)高度達到100%；而寬度不能達到100%； 右圖：(Opera)高度不能達到100%；而寬度達到100%；
接着小果就嘗試使用：
1.使用js獲取父級的寬高，賦給video；結果：失敗。
2.使用:-webkit-full-screen{}方法，沒有起作用。
3.使用兼容...
。。。累趴
之后小果就發現了簡單易操作的方法：
css代碼：（父級高度為0；設置padding-bottom；）
<style>
html,body{
height: 100%;
width: 100%;
}
p{
height: 50px;
margin: 20px;
font-size: 1.5em;
}
.videoTime{
position: relative;
height: 0;
width: 80%;
padding-bottom: 45%; //需要計算得到
border: 2px solid red;
}
.videoTime video{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
結果如下：
左圖：(Google Chrome) 右圖：(Firefox)
左圖：(Safari) 右圖：(Opera)
完美解決啊~
那么還有一個問題，padding-bottom的值是怎么得到的呢？
videoH：video的高
videoW：video的寬
videoTiW：父級的width ,使用的是百分比
padBotRes：padding-bottom的值
式子：
padBotRes = (videoH / videoW) * videoTiW
小果是通過計算得出的這個式子，解決問題的，如果有問題，歡迎來交流，padding的特性，有待去整理( ⊙ o ⊙ )。
就這樣子，獼猴桃姑娘開始🌱了，哇喔！