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>