• Muted video loops until user presses play
• Any previously playing videos will mute when new video is played
• Video will mute when scrolled out of view
• When the button is set to aria-pressed="true", different UI elements can be shown and hidden with CSS
• Adjust video url from src attribute on video-1_element
• Must use a direct link to the video file through services like Get A File. YouTube and Vimeo Videos will not work in this HTML Video Element.

<style>
.video-1_component:has(button[aria-pressed="true"]) .video-1_play {
	opacity: 0;
}
.video-1_component:has(button[aria-pressed="true"]) .video-1_pause {
	opacity: 1;
}
.video-1_component:has(button[aria-pressed="true"]):not(.is-hovered) .video-1_button {
	opacity: 0;
	transform: scale(0.7);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
	const endFns = [];
	function init(component, instant = false) {
		if (component.hasAttribute("data-video-1")) return;
		component.setAttribute("data-video-1", "");
    
		const video = component.querySelector("video");
		const button = component.querySelector("button");
		if (!video || !button) return;
		video.play();
		function showControl() {
			component.classList.add("is-hovered");
			clearTimeout(component.hoverTimeout);
			component.hoverTimeout = setTimeout(() => {
				component.classList.remove("is-hovered");
			}, 1000);
		}
		function playVideo() {
			endFns.forEach(fn => fn());
			button.setAttribute("aria-pressed", "true");
			component.classList.add("is-active");
			video.currentTime = 0;
			video.muted = false;
			video.loop = false;
			video.play();
			showControl();
		}
		if (instant) playVideo();
		function endVideo() {
			button.setAttribute("aria-pressed", "false");
			component.classList.remove("is-active");
			video.muted = true;
			video.loop = true;
			video.play();
		}
		endFns.push(endVideo);
		button.addEventListener("click", function () {
			button.getAttribute("aria-pressed") === "true" ? endVideo() : playVideo();
		});
		button.addEventListener("mousemove", showControl);
		button.addEventListener("mouseleave", () => component.classList.remove("is-hovered"));
		video.addEventListener("ended", endVideo);

		const observer = new IntersectionObserver((entries) => {
			entries.some(e => !e.isIntersecting) && endVideo();
		}, { threshold: 0.5 });
		observer.observe(component);
	}
	document.querySelectorAll(".video-1_component").forEach(init);
	document.addEventListener("click", (e) => {
		const component = e.target.closest(".video-1_component");
		if (!component) return;
		init(component, true);
	});
});
</script>