html crops height video to height 100vh, video to fullscreen

Question

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 and height 100vh. If the height (of the video with width 100wh) is bigger then the height 100vh, I want the video to crop so it will be on fullscreen view on the max width and height your browser. By cropping, I don't bother to missing some of the video (50px from the bottom or so), fullscreen in width and height 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 a div, div to 100 vh/vw, and some scripts I found but nothing really works...

Answer 1

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