“Lazy load” pro videa v Bricks modulu

U jednoho klienta jsem bojovala se situací, že měl na webu na jedné stránce 10+ videí, které v součtu vyšly na 30MB+ velikosti. A co s tím?

První myšlenka by pravděpodobně byla přidat loading=”lazy”, jenže tu je problém – lazy load pro videa nefunguje stejně jako pro obrázky.

Proto je na webu skript, který:

• videa na stránce najde automaticky,
• PHP odebere src ještě před odesláním stránky, takže prohlížeč nemá zdroj, který by stáhl,
• jakmile se video dostane do viewportu, JavaScript přiřadí src zpátky a video se začne stahovat.

//lazy load for videos
add_action('wp_footer', 'add_to_start_of_footer', 1);
function add_to_start_of_footer() {
    echo '
	<script>
//"lazyload" for videos
document.addEventListener("DOMContentLoaded", () => {
  const videos = document.querySelectorAll(".brxe-video video[data-src]");

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const video = entry.target;
        video.src = video.dataset.src;
        video.load();
        observer.unobserve(video);
      }
    });
  }, { rootMargin: "200px" });

  videos.forEach(video => observer.observe(video));
});
</script>
	';
}


add_action('template_redirect', function() {
    ob_start(function($html) {
        $html = preg_replace(
            '/(<video[^>]*)\ssrc="([^"]*\.(mp4|webm|ogg))"/',
            '$1 preload="none" data-src="$2"',
            $html
        );
        return $html;
    });
});