'How to make a video render better on the browser

I have a question. I have a website and I have a video playing in loop at the hero section. When I scroll down I change the video with an image using JavaScript to make the page run smoother but when the video is playing the page slows down. I saw a lot of websites that render videos on loop and doesn't affect the performance of the site. Is there any solution to this? Or any indication why the performance drops so much in my site? I'm using webm and the video is at 1080p. Here's my code btw:

<div class="container1" id="particles">
    <video class="pinkV" loop autoplay muted>
        <source src="images/Temple Pink (Loop).mp4" type="video/mp4">
    </video>
    <div class="suELogo">
        <svg data-src="images/SU_E2_Logo.svg"></svg>
    </div>
    <a href="#episodes">
        <i class="fas fa-chevron-down"></i>
    </a>
</div>
javascripthtmlcss


Solution 1:[1]

I solved the problem, I was encoding my files with webp and with an amd codec so the files were the problem. I'm using H264 (10-bits) now and works fantastic.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GLPG35

Related Questions