Fullscreen HTML5 video to big?

Question

I'm building a website with a fullscreen HTML5 video on the homepage.

my HTML:

<div class="fullscreen-bg">
    <div class="overlay-video"></div>
    <video loop muted autoplay poster="assets/images/background.jpg" class="fullscreen-bg__video">
        <source src="assets/video/background.webm" type="video/webm">
        <source src="assets/video/background.ogg" type="video/ogg">
        <source src="assets/video/background.mp4" type="video/mp4">
    </video>
</div>

and my CSS:

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}
.fullscreen-bg__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

My .webm file is 4,7mb, the .OGG file is 4,4mb and the .mp4 file is 37,1mb.

My problem is that my website is still really slow. Are my video files to big? Or is there a problem with my tag and the way I load the videos?

I can not find any solutions for this on internet so I hope someone knows a solution.

Thanks!

Answer 1

Remove below mentioned line and video then test it. If it is loading fast, then it is having issues with the size of .mp4 video.

    <source src="assets/video/background.mp4" type="video/mp4">