How to stop Vimeo video playing when element hidden?

Design help Custom code
2

Hey Olly, cool site!

Looking at your page, you are using Webflow’s native video player, and you are showing/hiding several of them using interactions for a kind of lightbox-effect. My guess is that you want this behavior for all of them. When video is playing, and the video overlay is closed, that video should be automatically paused.

All good.

Webflow’s video player uses Embedly, which uses Playerjs - so you can accomplish this by detecting the hide ( using a MutationObserver ), and then pause the videos using Playerjs.

Place this in your before-/body custom code area.
Here’s what it does;

  1. Inventories the Embedly videos on your page, and creates a set of Players to reference them
  2. Inventories the DIVs that will show/hide from your interaction. We know these are all immediate children of your player-wrapper DIV. On these overlays, we install a MutationObserver to detect when a hide happens.
  3. The MutationObserver function detects the hide, and uses playerjs to pause it.

IMPORTANT: This is working great on your site with Vimeo vids. My guess in Youtube, etc. would also work as long as you’re using the Webflow native video control, you’ll probably get the Embedly playerjs setup.

<script src="https://cdn.embed.ly/player-0.0.11.min.js"></script>

<script>
  $(document).ready(function() {
    // Selecting the iframes by class and creating players for each
    var players = [];
    $('.player-wrapper .embedly-embed').each(function(index, elem) {
      players[index] = new playerjs.Player(elem);
    });

    // Create a MutationObserver instance
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'style') {
          var displayStyle = $(mutation.target).css('display');
          if (displayStyle === 'none') {
            // Find the index of the hidden div
            var index = $(mutation.target).index();
            // Pause the corresponding video
            players[index].pause();
          }
        }
      });
    });

    // Observe each child div for changes in its 'style' attribute
    $('.player-wrapper').children().each(function(index, elem) {
      observer.observe(elem, {
        attributes: true
      });
    });
  });
</script>

EDIT: Adding this here for later, since I might expand on this approach for a more generic solution.