html crops height video to height 100vh, video to fullscreen
You could use the jquery videoBG plugin: http://syddev.com/jquery.videoBG/
Or you could add the following code: https://jsfiddle.net/wcv2ak9p/1/
The alternative image is displayed when the browser doesn't support the video.
HTML
<video id="moodvideo" autoplay loop>
<source src="moodvideo.mp4" type='video/mp4'>
<img id="alternative" src="alternative.jpg" />
</video>
CSS
#moodvideo, #alternative {
width: 100vw; /* Could also use width: 100%; */
height: 100vh;
object-fit: cover;
position: fixed; /* Change position to absolute if you don't want it to take up the whole page */
left: 0px;
top: 0px;
z-index: -1;
}
Jim Vercoelen
Just started IT education. Want to become a specialist.
Updated on June 17, 2022Comments
-
Jim Vercoelen almost 2 years
I am struggling with a stupid little thing. Working on this site:
(sorry for the slow server, school stuff you know)
The video you'll see is on height vh100, which is what i want. When I have this video on the max height of your browser the width of the video is not fullscreen. The code I have now:
HTML
<!-- video --> <video id="moodvideo" autoplay loop> <source src="moodvideo.mp4" type='video/mp4'> </video>
CSS
/* Video */ video { height: 100vh; width: 100vw; }
What I am trying to achieve is the video on full screen,
width 100wh
andheight 100vh
. If theheight
(of the video with width 100wh) is bigger then theheight 100vh
, I want the video to crop so it will be on fullscreen view on themax width
andheight
your browser. By cropping, I don't bother to missing some of the video (50px from the bottom or so), fullscreen inwidth
andheight
is more important to me.Now, I already searched and tried a lot before asking you guys, things like;
vw100/vh100
,min-height/width 100
, add the movie in adiv
,div
to100 vh/vw
, and some scripts I found but nothing really works... -
Jim Vercoelen almost 9 yearsOMG, thank you so much, for real! the last does the job(and is the most simple way for me)!!!!! trying for hours so thanks!!!!:D
-
TheOnlyError almost 9 yearsNo problemo, my pleasure :)
-
quw almost 9 years
-
Jim Vercoelen almost 9 yearsI am not that fan of IE, so who's visiting my site with IE has to download something els ^^. Its for school, still first year so that isn't that big deal. Although thanks for mention it!