基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。-H5教程-PHP中文網

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

高洛峰

發布： 2016-10-14 15:03:53

原創

2069 人瀏覽過

使用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 )高度達100%；而寬度無法達到100%；右圖：(Firefox)高度無法達到100%；而寬度達到100%；

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

左圖：(Safari)高度達到100%；而寬度無法達到100%；右圖：(Opera)高度無法達到100%；而寬度達到100%；

基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。

接著小果就嘗試使用：

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) reee

結果如下：

左圖：(Google Chrome) 圖：(Firefox) 基於html5，父級區塊中加入video，不能全螢幕播放的問題解決。