document.addEventListener("DOMContentLoaded", function () {
	const lazyVideos = [].slice.call(
		document.querySelectorAll(".video-container video")
	);

	// Build a helper to actually set sources + load
	function loadVideo(video) {
		const sources = video.querySelectorAll("source[data-src]");
		sources.forEach(source => {
			source.src = source.dataset.src;
		});
		video.load();
	}

	// --- 1. IntersectionObserver (best case) ---
	if ("IntersectionObserver" in window) {
		const lazyVideoObserver = new IntersectionObserver(
			function (entries, observer) {
				entries.forEach(entry => {
					if (entry.isIntersecting) {
						loadVideo(entry.target);
						observer.unobserve(entry.target);
					}
				});
			},
			{
				rootMargin: "200px 0px",
				threshold: 0.1,
			}
		);

		lazyVideos.forEach(video => lazyVideoObserver.observe(video));
		return;
	}

	// --- 2. Fallback: requestIdleCallback ---
	if ("requestIdleCallback" in window) {
		requestIdleCallback(() => {
			lazyVideos.forEach(video => loadVideo(video));
		});
		return;
	}

	// --- 3. Final fallback: load immediately ---
	lazyVideos.forEach(video => loadVideo(video));
});