How can I make my video background stay paused on all pages?

(Codepen for context: https://codepen.io/BravoLima2k4/pen/zYmrzox) I have a custom video background for my site, which you can pause if you don't like the moving background. There is also background music which is paused via the same method. However, I want it so that if you pause the background video on one page, it stays paused on all other pages, and vice-versa for when you unpause, it unpauses on all pages. Also as you many notice when you scroll, after a certain distance a blurred background will slide down behind the primary nav, but when you scroll back up it just disappears, and I can't figure out how to make it reverse the transition. Does anyone know how to do either of these? Thanks
1 Reply
Joao
Joao2y ago
I think that for sending events to multiple pages you can use the Broadcast Channel API. I've never used it myself but that's where I'd start looking: https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API As for the blur effect, you can simply move these two properties on the before element, to ensure that when the is-sticky class gets applied, they don't interfere with the transition:
.primary-header::before {
content: "";
position: absolute;
inset: 0;
transform: scaleY(0);
transition: transform 0.3s ease;
transform-origin: top center;
will-change: transform;
z-index: -1;
+ background: rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(1rem);
}

.primary-header.is-sticky::before {
transform: scaleY(1);
- background: rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(1rem);
}
.primary-header::before {
content: "";
position: absolute;
inset: 0;
transform: scaleY(0);
transition: transform 0.3s ease;
transform-origin: top center;
will-change: transform;
z-index: -1;
+ background: rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(1rem);
}

.primary-header.is-sticky::before {
transform: scaleY(1);
- background: rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(1rem);
}
Want results from more Discord servers?
Add your server