Streaming live at 10am (PST)

Stop Vimeo / YouTube video after closing modal

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

Demo:

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>

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?

1 Like

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

3 Likes

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.

1 Like

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 :frowning: 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!

2020 - here’s the updated code now that Webflow uses Embedly for the Video Element:

<script
type="text/javascript"
src="//cdn.embed.ly/player-0.0.11.min.js"
<script>
const embed = document.querySelector('iframe.embedly-embed');
var player = new playerjs.Player(embed);
console.log(player);
// Wait for the player to be ready.
player.on('ready', function () {
    console.log(this);
    const modal = document.getElementsByClassName('video-modal')[0];
    modal.addEventListener('click', () => {
        player.pause();
        return false;
    });
    return false;
});

Been googling for hours but I just cant seem to understand how to do this. (I tried using the embed code element but that made me have to use fitvids js. And that gave me new problems I could not solve.) Can you clarify what Im supposed to do? I want to use the youtube video element, I want it to be responsive and I want the video to stop when I close the modal. Webflow - The Design Team (Desktop only so far. You will need to click the preview button twice to make the share link work for some reason. The modal is on “High fives with Riste Lazaroski”). Lots of info :slight_smile:

Hey @Adam_Karlsson, I checked out your preview link. The snippet I posted above should work for you as well - you’ll just need to update to use the modalcloser class you’ve added as an overlay when the modal is open.

So instead of:
const modal = document.getElementsByClassName('video-modal')[0];

You’d have:
const modal = document.getElementsByClassName('modalcloser')[0];

Add that entire snippet (including the embedly script):

<script type="text/javascript" src="//cdn.embed.ly/player-0.0.11.min.js" />

To the closing tag and the video should pause whenever modalcloser is clicked.

Thanks! Will try after going thru some webflow + js basics on youtube :slight_smile:

@SiavashVJ have found a solution yet. I couldn’t solve the same problem also…
Thnx

Hello, I tried the solution from @jamesvclements. unfortuntely it isn’t working for me.

  • i use the video element from webflow with a youtube link
  • i added the code to the custom code of the page.
  • i give my close-X icon the class name ‘video-modal’.

am I missing something?