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!

Yes, on IE11, edge and Safari it is really slow but the rest of the browsers are not really fast as well — Wilco Van Meppelen Scheppink
And it is also depends upon your internet speed, if your testing it in live @WilcoVanMeppelenScheppink — Sathvik Chinnu
If my answer helped you, PLEASE set my answer as correct. Click the check next to my answer. @WilcoVanMeppelenScheppink — Sathvik Chinnu

Sathvik Chinnu Sathvik Chinnu · Accepted Answer · 2016-08-22T13:46:56

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">

Fullscreen HTML5 video to big?

1 Answers