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
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: