Need to resize an HTML5 video with CSS
Question
I have this example . All I need it make the video height:600px; and not fixed position , I just want make it in the first section on my site , when I try to change the position and height the video is become smaller , should i wrap it with div or something ?
The HTML :
<div id="bg">
<video src="video/video.mp4" id="bg-video" muted autoplay loop ></video>
</div>
The CSS :
#bg {
position: static;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
filter: blur(3px);
-webkit-filter: blur(3px);
}
2 answers
solution1
0 2014-02-25 14:55:04
First of all, to make the video stay on top your page you will have to change the position of the wrapping div to absolute.
Then you also have to adjust the currently relative height (200%) and set it to a fixed 600px. To make you video fill exactly the 600px of the div, set the videos height to 100% (or also to 600px). You might also want to remove any padding from the div or margin from the video.
Note that with this code your video will still have a relative width! Just apply the changes I made to the height to those things as well.
#bg {
position: absolute;
top: 0px;
left: -50%;
width: 200%;
height: 600px;
padding: 0px;
}
#bg video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
min-width: 50%;
height: 100%;
filter: blur(3px);
-webkit-filter: blur(3px);
}
solution2
-1 2014-02-25 14:52:02
The simplest solution which comes to my mind is
HTML:
<body>
<div id="bg">
<div class="wrapper">
<video src="video/video.mp4" id="bg-video" muted="" autoplay="" loop=""></video>
</div>
</div>
</body>
CSS:
#bg .wrapper {
height: 600px;
/* those two are only to center the video horizontally*/
width: 1067px;
margin: 0 auto;
}
So you can remove the style for #bg and #bg video
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.