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>
Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
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>
