Toggle pause on background videos

Toggle pause then play on selected background videos in your project

This video features an old UI. Updated version coming soon!
Clone this project

Background videos can be distracting and can cause harm to those sensitive to motion. That's why it’s important to provide a way for people to pause background videos that play automatically.

In this lesson, you'll learn how to add a button to toggle pause/play to your background videos on your site in three steps:

1. Paste the custom code provided before the body tag in your page/project settings



<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {
   function togglePlayPause() {
      $('video').each(function() {
       if (this.paused) {
         this.play();
       } else {
         this.pause();
       }
     });
   }
   function toggleVisibility() {
     $('video').each(function() {
     var opacity = $(this).css('opacity') == 0 ? 1 : 0
     $(this).css("opacity", opacity);
   });
   }
   $('#video-toggle').click(togglePlayPause);
});

</script>
Copy codeCopied!

2. Set your background video's ID to "video"

3. Set your button's ID to "video-toggle"

To publish these changes, publish your site. Now your site visitors can toggle to pause then play your background video!

Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!