const VISIBILITY_COVERAGE_FRACTION = 0.25;

window.addEventListener("DOMContentLoaded", () => {
	const players = document.querySelectorAll("[data-auto-play]");
	players.forEach((player) => {
		if (!(player instanceof HTMLVideoElement)) return;

		let loaded = false;

		new IntersectionObserver((entries) => {
			entries.forEach((entry) => {
				if (!loaded && entry.intersectionRatio > VISIBILITY_COVERAGE_FRACTION) {
					player.removeAttribute("preload");
					player.setAttribute("autoplay", "");

					loaded = true;
				};
			});
		}, { threshold: VISIBILITY_COVERAGE_FRACTION })
		.observe(player);
	});
});