Lazyloading videos with muted attribute is not working

[alexchakmakov]

Hello everyone. I'm having the following markup

<video class="lazyload"
       preload="none"
       data-autoplay=""
       loop=""
       playsinline=""
>
    <source src="VIDEO_URL" type="video/mp4">
</video>

This setup works perfectly, as evidenced by the network tab showing that only 22 out of 60 videos load initially, with more videos loading incrementally as I scroll down (24, 26, 28, 30, etc.).

However, the problem arises when I add the muted attribute to the videos. When the videos have the muted attribute, it seems that lazysizes fails, and all 60 videos load immediately on page load. What could be causing this issue?

Please note the following:

• I've included the unveilhooks plugin
• The videos are dynamically added to the DOM.
• I am using a masonry JavaScript library.
• I have an IntersectionObserver that plays the videos when they enter the viewport and pauses them when they exit.

Thanks in advance for you help!