Streaming live at 10am (PST)

Stop Vimeo / YouTube video after closing modal

Hi

I have looked around for the solution but I haven’t found any efficient one so far.

I have quite a few modals in my website. Some of them have the video embed inside. I want to be able to stop/close them when I click the button .close-modal which will also close the modal.

How can I do that? So I need a script that says when you click the element with class .close-modal all the element with the class .embed will stop. Something like this.

Thank you,
G

Ps. I’m not using I frame.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like

https://www.w3schools.com/tags/av_met_pause.asp

This should help you out. Get that script to work when you click the close modal and your videos should stop. If you need someone to implement it for you just send me a private message.

Thank you,

so basically I should put this into the footer code in my project setting:

<script>
var vid = document.getElementByClassName(".my-video"); 

function playVid() { 
vid.play(); 
} 

function pauseVid() { 
vid.pause(); 
}
<script>

is that right?

No no no . You gotta write that code in a way that it works according to your website. It’s not only a copy and paste job.

For example:

You gotta specify the ID for the video you want to stop. If you’re talking about multiple videos, you gotta create an expression that selects only the video that is inside the modal.

Then, the function pauseVid needs to be called when a determined trigger is fired.

If you want your users to be able to get the video back when they open the modal again, you should also configure the playVid function.

By custom code + Youtube API - solution (Less than 3-4 min to implement).

https://codepen.io/ezra_siton/pen/WgyxKM

Thank you for you help but if I knew how to code I wouldn’t be here asking for help.

I have multiple videos in my website, as I said in my first post I want to use classes and not IDs simply because I can’t apply the same ID to multiple videos.

I really don’t mind what happen to the video after the modal is closed, the goal is stopping the audio that comes out of the video when the modal is closed. It’s not nice having a random audio in background while navigating the website.

…so the script can also stop/reset all the video of the website, I really don’t mind.

is it easy to make?

Thank you,
G

Thank you it’s very useful but I don’t want to use iframe

Giuseppe, the thing is: We are helping. We are pointing you to the right path. We simply can’t teach you JavaScript in a forum post. It feels like you want us to create it for you so you can just copy and paste it inside your website. That’s not how web-developing works. We don’t even have your read-only. We don’t know what platform is hosting your video (each platform behaves differently)

These kind of situations are normally solved in 3 ways. You either:

  • Learn earn about the things we mentioned.
  • Share your read-only here and wait for someone who has the time to get it completely done for you and you just paste it into the website
  • Hire someone who has the skill set to implement it on your website.

I don’t want you to implement my website. I just asked a simple general question that’s why i didn’t put the read only link because there is no need for that.

I asked if there is a function that does this:

click class .close-modal = stop all videos with class .embed-video

I man are we on the webflow forum…I am talking about webflow here not coding. I need to fill the gaps (things that webflow doesn’t have) you also need to realise that this is an app like squarespace or similar so 50% of the people on this forum don’t know how to code.

If it’s too complicate for you, you don’t need to help me. I thought it would be very easy to make but apparently it’s a very complicate script.

Thank you,
G

Well Giuseppe, you missed the point of what I’ve said but I won’t extend this.

Happy designs and good luck!

No way to stop videos by event/click without code (For now). You don’t have to be JS-ninja to copy-paste 4-5 lines of scripts before the body.

Hard to answer without example. In general on click on X - you should loop throw all videos and stop (But “stop” also - Vimeo, youtube, html5 video - each one with another code/solutions).

Also - You should solve secnarios when the user close the modal without close-modal button (By esc, by click on the overlay area and so on).

1 Like

Hi Siton, thank you again but you pointed me to a script that is 80% about building a modal with code.

maybe my question wasn’t clear. I added the link to the website so maybe it’s clear what i’m trying to achieve.

every modal has a project inside and some of the project have videos.

https://preview.webflow.com/preview/giuseppe-bufalo?utm_medium=preview_link&utm_source=dashboard&utm_content=giuseppe-bufalo&preview=64ff8d5281ca290b7234af9736a12bec&mode=preview

Thank you,
G

I forgot to mention the modals for some reason don’t work in the read-only link they used to work tho. Feels like webflow is full of bugs sometimes.

but you can see the website here:
https://giuseppe-bufalo.webflow.io/3d-models

check the “exosuit” project there is a video in the modal at the end of the page.

Thank you,
G

solution by code:
https://codepen.io/ezra_siton/pen/voNPBN

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

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'),
    status = $('.status');
  $('.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="viemovideo" 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>

demo:
https://codepen.io/ezra_siton/pen/dQVbvo

Amazing ! that is very clear explanation.

Thank you for helping me, if in the future you need any 3D model/animation just send me an email, I’ll return the favour :slight_smile:

1 Like

Great :slight_smile: please mark as solution to close this topic (And for future searches).

@Siton_Systems Thank you for that explanation. However, if the button with the .stop-button also is supposed to trigger a Webflow interacition to close the modal, the interaction stops working (the button only stops the video).

Is there anyway to have a button both have the stop-button functionalty as in your solution AND fire an webflow interaction?

Maybe @bart could help me out?

Based on @Siton_Systems excellent reply for Vimeo videos, I’ve put together the equivalent using the YouTube API too.

1 - Add a video

Add ID of youtubevideo for all of your videos. This could work for classes too but not without changing it. You must include ?enablejsapi=1 at the end of the src in the iframe below:

<iframe id="youtubevideo" src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" />

2 - Add classes to the modal close triggers in your Webflow

Or make a note of the existing classes.

In the code below I was using .close-modal-button and .modal-wrapper but you can use as many or few as you like, separated by a comma.

3 - Add custom code

Copy-paste before the close of body (it works in the head too though)

<script>
  // Pause YouTube videos when modal windows are closed https://developers.google.com/youtube/iframe_api_reference
  
  var tag = document.createElement('script');
  tag.id = 'iframe-demo';
  tag.src = 'https://www.youtube.com/iframe_api';
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtubeplayer', {
        events: {
          'onReady': onPlayerReady
        }
    });
  }
  function onPlayerReady(event) {
    onModalWindowClosePauseVideo();
  }
  function onModalWindowClosePauseVideo() {
    // Modal window close triggers must have one of the classes in this querySelectorAll for this to work
    let closeModalTriggers = document.querySelectorAll('.close-modal-button, .modal-wrapper');
    for(var i = 0; i < closeModalTriggers.length; i++) {
      var closeModalTrigger = closeModalTriggers[i];
      closeModalTrigger.onclick = function() {
        player.pauseVideo()
      }
    }
  }
</script>

4 - Publish

1 Like