Stop Vimeo / YouTube video after closing modal

Design help General
22

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;
});
23

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. https://preview.webflow.com/preview/the-design-team?utm_medium=preview_link&utm_source=designer&utm_content=the-design-team&preview=3e595c330bf98703e485b41b296c6463&mode=preview (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:

24

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.

25

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

26

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

27

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?

28

I did everything as I wrote @AndyJ3T But it doesn’t work.
Why the webflow team didn’t foresee this before this time. How i can you tag one of them?

Link to the project:
https://preview.webflow.com/preview/alex-co-2-0-9b0b502d7466de1ea7d2fd42a49?utm_medium=preview_link&utm_source=designer&utm_content=alex-co-2-0-9b0b502d7466de1ea7d2fd42a49&preview=e12a367b189dd97dd5d5b89180c8c568&workflow=preview

Web link: https://alex-co-2-0-9b0b502d7466de1ea7d2fd42a49.webflow.io/

29

This code works but messes up my animation. My video is in the modal popup. So when I hit the btn “close modal” I want to actions happen simultaneously : 1) popup closes with animation 2) video sound disappears. When this code is applied it apparently overrides animation. Could you suggest any workaround?

30

@Siton_Systems thank you for this fix! Just a note for anyone in the future - the 'Embed html and responsive video ’ iframe code has a misspelled class (viemovideo instead of vimeovideo) so make sure you update that :).

1 Like
31

Thanks. I update the code :slight_smile:

32

For anyone else looking for a Youtube solution, check out this: Make Play, Pause, Stop Buttons for YouTube Embed on Website

33

Thanks for the code.

I took your code and changed it so it works with multiple videos and multiple buttons.
Here it is…

Just change the classes “.first-button” and “.second-button” to the classes of the button you want to use as trigger to pause the videos that are currently playing.

<script type="text/javascript" src="//cdn.embed.ly/player-0.0.11.min.js"> </script>
<script>
document.querySelectorAll('iframe.embedly-embed').forEach((embed) => {
  const player = new playerjs.Player(embed);
  player.on('ready', function() {
    document.querySelectorAll('.first-button, .second-button').forEach((button) => {
      button.addEventListener('click', () => {
        player.pause();
      });
    });

    return false;
  });
});

</script>
1 Like