Streaming live at 10am (PST)

How to Pause and Stop a Video in a Modal on Close?


#1

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:

<script type="text/javascript">

  $(document).ready(function() {
    $('#modal-movie').click(function(e) { 
      $('.modal-background-movie').fadeIn();
      e.preventDefault(); 
    });

    $('#modal-close-movie').click(function() {
      $('.modal-background-movie').fadeOut();
        $('#modal-video')[0].pause();
    });
  });

</script>

Everything works except the "$('#modal-video')[0].pause();" part.
Thanks!!!


Pause Youtube Video With Button
Autoclose on click outside modal
Modules with Videos - Code so Closing a Module will ALSO stop the video?
Pausing Embedded Youtube Video with Script Problem
Issue with webpage section
#2

Also, as a quick follow up:
How would you auto-start/play a video when the modal appears? Thanks!


#3

@thesergie, @danro, @bartekkustra Any ideas guys? Would really appreciate the help smile


#4

It's nice to see people calling me next to webflow founders wink 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>

#5

nice input guys! A question for a non coder like me..

  1. if i give the class "videoplayer" to my video, where do I put the source to it? Im not so familiar with codes. blush

Tis is my modal

$(document).ready(function() {
$('.modal-link').click(function(e) {
e.preventDefault();
$('.modal-background').fadeIn();
});
$('.close-modal').click(function(e) {
e.preventDefault();
$('.modal-background').fadeOut();
});
});

Thanks!


#6

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

#7

@bartekkustra - you might not be a webflow founder, but I've learned a lot from you on how best to use it. Thanks for all of your posts! smile

The code works perfectly - thanks so much!

For future reference, how do I change the src value of the video? I'm not sure what that means.


#8

@bartekkustra Should this also autoplay the video?

Thanks


#9

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:

http://help.webflow.com/how-to-control-youtube-video-using-javascript

Now @bartekkustra can comment on his method (which is also good, there are usually several ways to accomplish some custom function smile. 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.


#10

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?


#11

I have the same issue as well, can't stop the video when closing the modal.

Here is my site preview link: https://webflow.com/design/gtgt?p=545733d901650e0c47742ea6

and my modal

<script type="text/javascript">

$(document).ready(function() {
  $('#modal-link-project-1').click(function() {
    $('#modal-background-project-1').fadeIn();
  });
  $('.close-modal').click(function() {
    $('#modal-background-project-1').fadeOut();
  });
});

</script>

what should i add to the script to make it works, thanks


#12

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

#14

But I have several modals, once i opened a modal, i opened others as well, could you please help me to have a look?

Preview Link: https://webflow.com/design/gtgt?p=545751fc11fe688e1cf322a4

<script type="text/javascript">
 var src = $('#banner-video').children('iframe').attr('src');

$(document).ready(function() {
  $('#modal-link-banner').click(function(e) {
    e.preventDefault();
    $('#banner-video').children('iframe').attr('src', src);
    $('#modal-background-banner').fadeIn();
  });
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('#banner-video').children('iframe').attr('src', '');
    $('#modal-background-banner').fadeOut();
  });
});

</script>

<script type="text/javascript">
 var src = $('#project-video-1').children('iframe').attr('src');

$(document).ready(function() {
  $('#modal-link-project-1').click(function(e) {
    e.preventDefault();
    $('#project-video-1').children('iframe').attr('src', src);
    $('#modal-background-project-1').fadeIn();
  });
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('#project-video-1').children('iframe').attr('src', '');
    $('#modal-background-project-1').fadeOut();
  });
});

</script>

Pause HTML Embeded Video on Custom Modal Close
#15
<script>
$(document).ready(function() {

  // list of video modals
  var src1 = $('#banner-video').children('iframe').attr('src');
  var src2 = $('#project-video-1').children('iframe').attr('src');

  // first modal
  $('#modal-link-banner').click(function(e) {
    e.preventDefault();
    $('#banner-video').children('iframe').attr('src', src1);
    $('#modal-background-banner').fadeIn();
  });

  // second modal
  $('#modal-link-project-1').click(function(e) {
    e.preventDefault();
    $('#project-video-1').children('iframe').attr('src', src2);
    $('#modal-background-project-1').fadeIn();
  });

  // close all videos
  $('.close-modal').click(function(e) {
    e.preventDefault();
    $('#banner-video').children('iframe').attr('src', '');
    $('#project-video-1').children('iframe').attr('src', '');
    $('#modal-background-banner').fadeOut();
    $('#modal-background-project-1').fadeOut();
  });
});
</script>

#16

Thanks! You make my day!

My modals now work prefectly!


#17

does webflow have a sample / tutorial video... for this.


#18

Beautiful code! Just used and it was excellent. Ninja where are you!!!!!!!!!!


#19

I'm everywhere and nowhere:)


#20

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.

And there you go :slightly_smiling:


#21

A post was split to a new topic: Trouble adding Video through embed