Hey Webflow’ers,
I have a video that appears in a modal. When you close the modal, the audio from the video is still playing. Does anyone know how to stop a video from playing after you close a modal that contains it? I’ve looked around stack overflow but nothing seems to work so far. Here’s the custom webflow js code:
It’s nice to see people calling me next to webflow founders I feel good ;D
Put this one in the custom code section in the before </body> field (the second one).
<script>
$(document).ready(function() {
// set unique id to videoplayer for the Webflow video element
var src = $('#videoplayer').children('iframe').attr('src');
// when object with class open-popup is clicked...
$('.open-popup').click(function(e) {
e.preventDefault();
// change the src value of the video
$('#videoplayer').children('iframe').attr('src', src);
$('.popup-bg').fadeIn();
});
// when object with class close-popup is clicked...
$('.close-popup').click(function(e) {
e.preventDefault();
$('#videoplayer').children('iframe').attr('src', '');
$('.popup-bg').fadeOut();
});
});
</script>
To insert a video to Video Widget in Webflow simply click the video, go to settings panel and paste the link to the video on youtube.
This is the code you should have. Find a difference between this one, yours and the one I placed above. This code works only for youtube videos since vimeo is little more complicated if I remember well.
$(document).ready(function() {
// set unique id to videoplayer for the Webflow video element
var src = $('.videoplayer').children('iframe').attr('src');
$('.modal-link').click(function(e) {
e.preventDefault();
$('.videoplayer').children('iframe').attr('src', src);
$('.modal-background').fadeIn();
});
$('.close-modal').click(function(e) {
e.preventDefault();
$('.videoplayer').children('iframe').attr('src', '');
$('.modal-background').fadeOut();
});
});
Just FYI, there is another method also where you can control a youtube video via the YouTube javascript API, you can read more about some basic control functions when using an embedded video from YouTube, using the Embed widget:
Now @bartekkustra can comment on his method (which is also good, there are usually several ways to accomplish some custom function . I think his method is setting the src value of the video to the video url pasted into the url field, or to nothing at all (nothing at all = stop the video, since there is no more video url as source).
In the method using the YouTube API, you can also Play, Pause, Stop, Seek and more with the videos you are retrieving from YouTube. Looking at @bartekkustra’s code, it looks like that could also be used and merged with the script code for the YouTube API, to control the Video embed widget, but I would have to play around with it.
##Hello Knights Of The Great Order Of The Video Player Control Thread##
(now you see me coming with my question, don’t you?)
@bartekkustra@cyberdave I’m trying to do the same for Vimeo videos. Actually I only need to stop the video when the modal is closed. Is there an easy way to help me?
This topic, few posts above. 5 above your post, to be precise :)
$(document).ready(function() {
// set unique id to videoplayer for the Webflow video element
var src = $('.videoplayer').children('iframe').attr('src');
$('.modal-link').click(function(e) {
e.preventDefault();
$('.videoplayer').children('iframe').attr('src', src);
$('.modal-background').fadeIn();
});
$('.close-modal').click(function(e) {
e.preventDefault();
$('.videoplayer').children('iframe').attr('src', '');
$('.modal-background').fadeOut();
});
});
I wanted to post an update to this thread as we just ran into this issue again on a recent project and the original answer is no longer accurate.
The standard output for videos with Webflow no longer has a class “videoplayer”. The class is now “w-video”. This line $(‘.w-video’).children(‘iframe’).attr(‘src’, src); just needs to have the class or id of the element that contains the iframe where “w-video” is.
I feel good ;D
