Hi
I would love to stop a vimeo video from playing with another button than the play button. 
If you press the play button a window opens up with a embed vimeo video inside.
Is this something anyone can help me with?
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”: Image 2018-03-10 at 6.14.30 PM
Set the ID of the link that closes the video embed to “closevid”: Image 2018-03-10 at 6.26.44 PM
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.
Thank you Dave! Works like a sharm!
BUT 
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
Hi, I have updated the script, copy and replace the old code, see if that helps.
Cheers,
Dave
Dave, I hope its ok that I say this, but I love you! <3
Works great! Thank you so much!
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?
Hi @ Cyberdave,
first off, thank you for the script! It works great and would like to use this code in combination with a collection list.
I have a collection list with several buttons to show multiple Vimeo Videos in a Custom Modal Window and Custom Embed Code for the Iframe, changing the code and ids of the individual videos with the collection list. I came across a few problems using more than one video
One Video:
-Using a single video everything works great with the combination of the collection
Multiple videos:
-The modal window shows with a different button the same video (i guess it is something about the unload video option)
i am sure there is a simple solution but i can’t figure it out or find anything like this on the internet.
Thanks for the script @cyberdave !
I was trying this out on my company’s site with a custom modal that pops up the the native webflow video element, but was’st able to get it to work untill I edited the script from refering to the iframes id as #embedvid and changed it to the class .embedly-embed
I am by no means certified to say if that is correct or isnt going to break something else on my site, but i did get ot to work that way. Wondering if that is bad form or can cause other problems. Site wide?
Thanks again!
link: oblong.webflow.io/mezzanaine (in the 360 video section)
I ran into the same problem, any ideas how to do it if there are multiple videos from a collection?
http://gava-kids.webflow.io/our-kids#
Thanks!
Hey, did you figure out how to stop multiple videos when clicking the X button?
I’m struggling with this issue because I have to script several videos instead of one
Hi Dave,
Thanks for this. I’ve been playing for hours and can’t get it to work!
Could you please have a look for me and tell me what I missed? It’s the green play button on the first fold of:
Hi mate, I know this is an old thread but I was facing this issue and so far this script seems helpful. Thing is, when the modal closes the audio does not stops as it should but restarts from cero.
Thanks in advance.
Hello @cyberdave
Thanks for this. It works perfectly with one video on a page, but is there a way to get this to work with multiple videos? I have a CMS collection list for an animation studio team page and each team member has their own page with a portfolio of videos.
Please help?
Thanks,
Dave
I’m having the same issue, I have several videos from a collection on a page, which show on a modal.
Any solution?
Thanks,
Sofia
Hey guys, I was able to make this work with multiple videos by changing the script to trigger on .class instead of #id.
I am not a javascript guru, so please, let me know if this is not a best practice.
Here’s what to do in three steps:
1. Add this modified version of @cyberdave 's script into the Before Body of 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>
2. Give your iframe a class of ‘embedvideo’.
3. Give your close button div a class of ‘closevid’.
Finally, publish and you are all set.
I hope this helps!
Hello together,
unfortunately I encountered the same problem with our agency page.
Unfortunately the answer from @edwwward did not work.
I have adapted the code together with a programmer so that it now works wonderfully. Just follow the instructions from @edwwward but use the following customized code:
<script>
$(document).ready(function() {
$('.closevid').click(function() {
StopEmbedVideo();
});
});
function StopEmbedVideo() {
var $frame = $('iframe.embedvideo');
$.each( $frame , function( index, value1 ) {
var value = $(value1);
// saves the current iframe source
var vidsrc = value.attr('src');
// sets the source to nothing, stopping the video
value.attr('src','');
// sets it back to the correct link so that it reloads immediately on the next window open
value.attr('src', vidsrc);
});
}
</script>
I hope this helps!