Kevin Powell - Community•14mo ago

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•14mo 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);
}

Gaming

Programming

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