Stop Vimeo / YouTube video after closing modal

Design help General
14

solution by code

Demo:
https://test-c0d8d3.webflow.io/stop-viemo-on-click

Very simple to move this idea to webflow.

step 1/3 - add videos

Add viemo class vimeovideo for all of your videos. I don’t know why - but the code works only by embed html (But the output is the same)

<iframe class="vimeovideo" src="//player.vimeo.com/video/331008626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>

And video 2

<iframe class="vimeovideo" src="//player.vimeo.com/video/331008626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>

image
image1001×418 82.6 KB

image

Step 2/3 - add stop button

Add class stop-button for the “stop” element
image

Step 3/3 custom code

Copy-paste before body

<!-- stop viemo videos on click - juny 2019 -->
<script src="https://cdn.jsdelivr.net/npm/vimeo-froogaloop@0.1.0/froogaloop.min.js"></script>

<script>
  var iframes = $('.vimeovideo');
  $('.stop-button').bind('click', function() {
    iframes.each(function() {
      var player = $f(this);
      player.api("unload");  
    });
    return false;
  });
 
</script>

Step 4 - Publish :slight_smile:

Embed html and responsive video -

Copy-paste this code (extra wrapper and inline style) - and each time change the video url #id

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe class="vimeovideo" src="https://player.vimeo.com/video/156299091?muted=0&autoplay=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

**For pause change the code to: player.api("pause"); .

1 Like