Based on HTML5, the problem of adding video in the parent block and not being able to play in full screen is solved.-H5 Tutorial-php.cn

Based on HTML5, the problem of adding video in the parent block and not being able to play in full screen is solved.

高洛峰

Release： 2016-10-14 15:03:53

Original

2131 people have browsed it

When using the video tag, the video cannot always occupy the full screen of the parent. The originally budgeted 10-minute project ended up stuck in the video. I am a diligent little fruit, so I still plan to write it down for mutual encouragement. . .

Code (css content):

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

Copy after login

Code (body content)

<body>
<p>视频</p>
<div class="videoTime">
<video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video>
</div>
</body>
</html>

Copy after login

We set the video tag as usual: height: 100%; width: 100%;

The results are as follows:

Left picture: (Google Chrome )The height reaches 100%; but the width cannot reach 100%; Right picture: (Firefox) The height cannot reach 100%; but the width reaches 100%;

Based on HTML5, the problem of adding video in the parent block and not being able to play in full screen is solved.

Left picture: (Safari) The height reaches 100%; And the width cannot reach 100%; Right picture: (Opera) The height cannot reach 100%; and the width reaches 100%;

Based on HTML5, the problem of adding video in the parent block and not being able to play in full screen is solved.

Then Xiaoguo tries to use:

1. Use js to get the width and height of the parent, Assigned to video; result: failed.

2. Using:-webkit-full-screen{} method does not work.

3. Use compatible...

. . . After lying down

, Xiaoguo discovered a simple and easy method:

css code: (parent height is 0; set 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>

Copy after login

The results are as follows:

Left picture: (Google Chrome) Right Picture: (Firefox)

Based on HTML5, the problem of adding video in the parent block and not being able to play in full screen is solved.