Based on html5, video is added to the parent block, which cannot be played in full screen ., Html5 full screen playback
Using video tags, videos cannot occupy full parent-level full screen. The original 10-minute project budget is stuck in video. The diligent little fruit is still to be noted down and shared among others...
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> video </p>
<Div class = "videoTime">
<Video class = "videoShowing" src = "video/video.mp4" autoplay = "autoplay"> video </video>
</Div>
</Body>
</Html>
We set the video label as follows: height: 100%; width: 100%;
The result is as follows:
Figure on the left: (Google Chrome) the height is 100%, but the width cannot be 100%. figure on the right: (Firefox) the height cannot be 100%, and the width is 100%;
Figure on the left: (Safari) the height is 100%, but the width is not 100%. figure on the right: (Opera) the height cannot be 100%, and the width is 100%;
Then xiaoguo tries to use:
1. Use js to obtain the width and height of the parent class and assign it to video. Result: failed.
2. The-webkit-full-screen {} method does not work.
3. Compatibility...
... Tired lie
Then xiaoguo discovered a simple and easy-to-use method:
Css Code: (the parent height is 0; the padding-bottom is set ;)
<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%; // calculated
Border: 2px solid red;
}
. VideoTime video {
Position: absolute;
Height: 100%;
Width: 100%;
Top: 0;
Left: 0;
}
</Style>
The result is as follows:
(Google Chrome) (Firefox)
Figure (Safari) Right: (Opera)
Then there is another question: How can we get the value of padding-bottom?
VideoH: video height
VideoW: video width
VideoTiW: the width of the parent level, which is the percentage.
PadBotRes: Value of padding-bottom
Statement:
PadBotRes = (videoH/videoW) * videoTiW
Xiao Guo solves the problem through the formula obtained through computation. If there is any problem, you are welcome to discuss the features of padding, which need to be sorted out (⊙ o ⊙ ).
In this way, Kiwi girl started
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
