Streaming live at 10am (PST)

Stop Vimeo / YouTube video after closing modal

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?