search

Home  >  Article  >  Web Front-end  >  Based on HTML5, the problem of adding video in the parent block and not being able to play in full screen is solved.

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

高洛峰
高洛峰Original
2016-10-14 15:03:532103browse

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>

Code (body content)

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

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>

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.

Left picture: (Safari) Right picture: (Opera)

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

Perfect solution~

So there is another question, how is the value of padding-bottom obtained?

videoH: video height

videoW: video width

videoTiW: parent width, using percentage

padBotRes: padding-bottom value

Formula:

padBotRes = (videoH / videoW) * videoTiW


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Canvas - Use timers to simulate dynamic loading animations!Next article：Canvas - Use timers to simulate dynamic loading animations!

Related articles

See more