Streaming live at 10am (PST)

Stop Vimeo video with another button


#1

Share link

Hi
I would love to stop a vimeo video from playing with another button than the play button. :slight_smile:

If you press the play button a window opens up with a embed vimeo video inside.

  1. I would like the video to stop playing when you press the close window button under the video
  2. If possible I would like the video to autoplay when the window open.

Is this something anyone can help me with? :slight_smile:


#2

Hi @krubens, thanks for the good question.

At the moment closing a modal window when playing an iframe embed will not stop the video without a little help from some custom code.

You can try this, first give your iframe an ID like “embedvideo”: https://cl.ly/0o3B1Q1m0Q15

Set the ID of the link that closes the video embed to “closevid”: https://cl.ly/3P0L0N2Y223P

Next, add a little custom code to the Before Body of the page:

   <script>
    $(document).ready(function() {
      $('#closevid').click(function() {
        StopEmbedVideo();
      });
    });

    function StopEmbedVideo() {
      var $frame = $('iframe#embedvideo');

     // saves the current iframe source
     var vidsrc = $frame.attr('src');

    // sets the source to nothing, stopping the video
    $frame.attr('src',''); 

       // sets it back to the correct link so that it reloads immediately on the next window open
       $frame.attr('src', vidsrc);

    }
    </script>

Next republish the site, play the video then click the close link to unload the video.

I hope this helps.


#3

Thank you Dave! Works like a sharm!

BUT :smiley: Now the video is gone, can you add to the code when you press the Play button in the Hero sections its back to how it was? So if they want to see it again they can :slight_smile:


#4

Hi, I have updated the script, copy and replace the old code, see if that helps.

Cheers,
Dave


#5

Dave, I hope its ok that I say this, but I love you! :smiley: <3
Works great! Thank you so much!


#6

Will this work for Youtube videos as well? Tried and am getting this error in the console. The videos still work on the hosted domain but my test on the webflow.io site gave me this.

http://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FVv8UDS4kGZA%3Ffeature%3Doembed&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DVv8UDS4kGZA&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FVv8UDS4kGZA%2Fhqdefault.jpg&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=youtube
[Error] Failed to load resource: The network connection was lost. (media.html, line 0)

Any ideas?

Share Link