Trouble with a specific Hero Video interaction

I’m essentially looking to replicate the behavior and layout at the top of this page: https://www.unmade.com/

In other words:

• Full-width background video, stretched to fit.
• Video is darkened, shortened, looped, and without sound by default.
• Centered “Play” button launches the full video with sound and controls, pausing the background video.
• Sticky transparent header bar/primary nav over the video.

In my experiments with Color Blocks and Full Screen Sliders, neither seems to quite do this. Color Blocks come with limited functionality for background videos, so I can’t mute the sound by default (making them mostly useless), and clicking a Play button (done with a simple icon with a video link attached, centered in a content block) doesn’t pause the background video when the new video lightbox pops up, which proves to be really distracting.

Full Screen Sliders offer more control over the video behavior, but it’s not clear how I can use it as the background and position a Play button over it, to link to the full video.

Is there a way to accomplish this as it appears in the example link?

• This topic was modified 7 years, 7 months ago by Brosnan.