There are a lot of projects I have that have a background video that serves as a sort of Section. I have my full structure built out, but behind all my elements, it’s a video.
The problem with background videos is that, in a lot of cases, they can be distracting or even cause harm, which is why an increasingly common pattern is to add a toggle so people can stop the motion from happening.
In this lesson, we’re going to use a custom code snippet and two quick changes to IDs to give us a play/pause button that toggles pause (then play) a background video. And I have to do just three quick —
[Sara] Okay, I didn’t actually expect that to work.
[Grímur]...things. The first step is to paste this custom code snippet into our settings (I’m using page settings here since I want it to apply to this specific page, and we’ve included this below the video if you want to copy and paste). And of course, I’ll make sure to paste it before the closing body tag.
Save. First thing done.
The second quick thing is setting my Background video (under Element settings, I’m setting the ID to just video). This way, it matches the custom code snippet I added a second ago.
And third? I’m going to take this button (this is just a Link block with an image inside, but you could literally use a button, a Heading, a squirrel — whatever. As long as you go over to Element settings, and add an ID of, get ready for it, "video-toggle".
That’s really it. And now? In order to test this and see it work, I have to publish. Once it's published, I'll go to the live site and... Video plays...press the button, video stops. Press it again. Video resumes.
That’s adding a play/pause button to control a Background video in the Webflow Designer.