Hide Video In Low Power Mode

Video
Utility
CSS
JS
  • Add attribute name of data-low-power-hidden to custom element with video tag
  • Include code in site settings footer code
  • Video will have opacity 0 until it starts playing. Since it never starts playing in lower power mode, it will remain hidden.
<style>
[data-low-power-hidden] { opacity: 0; transition: opacity .3s ease; }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll("[data-low-power-hidden]").forEach(video => {
		const reveal = () => video.style.opacity = "1";
		video.addEventListener("playing", reveal);
		if (!video.paused && video.readyState >= 2) reveal();
	});
});
</script>
Last Updated: Nov 14, 2025
  • Add attribute name of data-low-power-hidden to custom element with video tag
  • Include code in site settings footer code
  • Video will have opacity 0 until it starts playing. Since it never starts playing in lower power mode, it will remain hidden.
<style>
[data-low-power-hidden] { opacity: 0; transition: opacity .3s ease; }
</style>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll("[data-low-power-hidden]").forEach(video => {
		const reveal = () => video.style.opacity = "1";
		video.addEventListener("playing", reveal);
		if (!video.paused && video.readyState >= 2) reveal();
	});
});
</script>