Stop Vimeo / YouTube video after closing modal

Giuseppe · July 22, 2019, 9:27am

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)

Jeandcc · July 22, 2019, 11:37am

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.

Giuseppe · July 22, 2019, 1:30pm

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?

Jeandcc · July 22, 2019, 1:50pm

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.

Siton_Systems · July 22, 2019, 2:08pm

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

Giuseppe · July 22, 2019, 2:11pm

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

Giuseppe · July 22, 2019, 2:13pm

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

Jeandcc · July 22, 2019, 2:23pm

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.

Giuseppe · July 22, 2019, 2:45pm

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

Jeandcc · July 22, 2019, 2:55pm

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

Happy designs and good luck!

Siton_Systems · July 22, 2019, 2:59pm

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).

Giuseppe · July 22, 2019, 4:03pm

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

Giuseppe · July 22, 2019, 4:09pm

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

Siton_Systems · July 22, 2019, 5:57pm

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>

Step 2/3 - add stop button

Add class stop-button for the “stop” element

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

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"); .

Giuseppe · July 22, 2019, 10:58pm

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

Siton_Systems · July 22, 2019, 11:57pm

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

SiavashVJ · May 16, 2020, 12:57pm

@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?

AndyJ3T · August 20, 2020, 2:20pm

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

lemoura · October 10, 2020, 8:22pm

Satuday afternoon and here i am finding out about this missing feature. Webflow doesnt give you the option to make a simples video galley. I think instead of wasting time making BLM propaganda about “master” or whatever on top of your projects, they should focus on developing basic and essential features. I am getting tired of webflow since everything has to be done by raw coding, so what´s the point in subscribing to webflow? It doesnt make sense.

jonypepe · October 19, 2020, 4:35pm

Thanks for the steps but when you’re not using an iframe and try to ad the ‘?enablejsapi=1’ at the end of the source youtube code, webflow simple can’t accept the code and its automatically deleted when using the elements youtube setting on webflow.

Is there another way when your are not using iframe, just classes?

I don’t post the preview here coz you can’t see the video playing.

thanks!

Topic		Replies	Views
Stop Vimeo video with another button Custom code	15	10714	March 7, 2023
How to Pause and Stop a Video in a Modal on Close? Custom code	20	91641	February 14, 2017
Pause or stop Vimeo video after closing modal custom code General	6	13528	May 17, 2023
Youtube iFrame Keeps playing when Modal is closed Custom code	5	3165	November 17, 2020
How to stop youtube video after closing modal Custom code	10	25077	May 10, 2023

Stop Vimeo / YouTube video after closing modal

step 1/3 - add videos

Step 2/3 - add stop button

Step 3/3 custom code

Embed html and responsive video -

1 - Add a video

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

3 - Add custom code

4 - Publish

Related topics