Lazy Load Videos

lazy-load-videos.js

(function () {
	function initLazyVideos() {
		var videos = document.querySelectorAll("video[data-src]");

		if ("IntersectionObserver" in window) {
			var observer = new IntersectionObserver(
				function (entries, observer) {
					entries.forEach(function (entry) {
						if (entry.isIntersecting) {
							var video = entry.target;
							video.src = video.getAttribute("data-src");
							video.poster = video.getAttribute("data-poster");
							observer.unobserve(video);
						}
					});
				},
				{ rootMargin: "100%" }
			);

			Array.prototype.forEach.call(videos, function (video) {
				observer.observe(video);
			});
		} else {
			Array.prototype.forEach.call(videos, function (video) {
				video.src = video.getAttribute("data-src");
				video.load();
			});
		}
	}

	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", initLazyVideos);
	} else {
		initLazyVideos();
	}
})();

lazy-load-videos.php

<?php
/**
 * Plugin Name: Lazy Load Native Videos
 * Update URI: -
 */

namespace Preseto\Lazy_Load_Native_Videos;

class Plugin {

	const JS_VERSION = '0.1.2';

	private bool $has_lazy_videos = false;

	private string $plugin_file;

	public function __construct( $plugin_file ) {
		$this->plugin_file = $plugin_file;
	}

	public function init() {
		add_filter( 'render_block_core/video', [ $this, 'filter_make_src_lazyload' ], 10, 2 );
		add_action( 'wp_footer', [ $this, 'action_enqueue_scripts' ], 10 );
	}

	private function get_url( string $path ): string {
		return plugin_dir_url( $this->plugin_file ) . ltrim( $path, '\\/' );
	}

	public function filter_make_src_lazyload( $block_content, $block ) {
		$this->has_lazy_videos = true; // Enqueue the JS only if any videos are present.

		// TODO: Do this only if preload is set to something other than "none".
		$block_content = str_replace( ' src=', ' data-src=', $block_content );
		$block_content = str_replace( ' poster=', ' data-poster=', $block_content );

		return $block_content;
	}

	public function action_enqueue_scripts() {
		if ( ! $this->has_lazy_videos ) {
			return;
		}

		wp_enqueue_script(
			'lazy-video-preload',
			$this->get_url( 'lazy-load-videos.js' ),
			[],
			self::JS_VERSION,
			true
		);
	}

}

$plugin = new Plugin( __FILE__ );

add_action( 'plugins_loaded', [ $plugin, 'init' ] );