Streaming live at 10am (PST)

How to create video modal pop up?


#1

I had added a video to my model popup but am wondering how can I make the video stop once the user clicks close. Is that possible with the video running off Youtube?


[Tutorial] How to create a modal/pop-up in Webflow
#2

Am having the same challenge as @mktgmeg.
I added a youtube video to my model popup but the video keeps on playing after the modal is closed. Is there a way to stop the video from playing after exiting the modal window?

And thanks for the great help here, its been awesome.


Controlling Embedded YouTube Video using Javascript
#3

Hey @mktgmeg and @Busayo_Kupoluyi you can check out this info on how to stop the video using jquery: http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery


#5

Thanks everyone for the follow up!


#6

Thanks very much for this article. It helped me fix the modals on my site.

Sadly I figured today out that the youtube videos still continue to play after closing it on IE9. Is there any way to add some java code that stops the videos as well on IE9? Or is my only option to make the site display the videos without modals on IE9?

Usually I wouldn't care about an older version of Internet Explorer but I'm building this site for a customer at work and they themselves don't use the newest versions of Windows.

This is the link to my published site http://ausbildung-test.webflow.com/

Thanks very much in advance for your help!


#7

This is currently the Java code I'm using to stop the video:

**$('.cindy-modal').click(function(e) {
e.preventDefault();
$('.cindy-modal-background').fadeIn();
});
$('.cindy-modal-close').click(function(e) {
e.preventDefault();
$('.cindy-modal-background').fadeOut();
stopthevideo();
});**

I found a website (http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery)
There I found this piece of code, which I don't really know how to correctly implement so I can test it in IE9:

$('#playerID').get(0).stopVideo();

or this which I don't know how to implement either:

**var myPlayer = document.getElementById('playerid');
myPlayer.stopVideo();**


#8

You need this script to put on your Custom Code on webflow.

<script>
   function stopthevideo(){
       var myPlayer = document.getElementById('my-video');
       myPlayer.stopVideo();
   }
</script>

#9

Thanks pastiwiawa for the help. I tried your code three different ways and none of the ways I tried, stopped the video on IE9 : (

This is what I tried (I've cut out all the unnecessary repeating parts):

<script type="text/javascript">

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

});

</script>

<script>
   function stopthevideo(){
       var myPlayer = document.getElementById('my-video');
       myPlayer.stopVideo();
   }
</script>

this as well

<script type="text/javascript">

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

  function stopthevideo(){
      var myPlayer = document.getElementById('my-video');
      myPlayer.stopVideo();
  }

});

</script>

and this

<script type="text/javascript">

function stopthevideo(){
    var myPlayer = document.getElementById('my-video');
    myPlayer.stopVideo();
}

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

});

</script>

#10

This I just tried too and it didn't work

<script type="text/javascript">

function stopthevideo(){
    var myPlayer = document.getElementById('my-video');
    myPlayer.stopVideo();
}

$(document).ready(function() {
    $('.bianca-modal').click(function(e) {
    e.preventDefault();
    $('.bianca-modal-background').fadeIn();
  });
  $('.bianca-modal-close').click(function(e) {
    e.preventDefault();
    $('.bianca-modal-background').fadeOut();
    function stopthevideo(){
        var myPlayer = document.getElementById('my-video');
        myPlayer.stopVideo();
    }
  });

});

</script>

#11
$(document).ready(function() {
  var vsrc = $('#my-video').attr('src');
  $('.cindy-modal').click(function(e) {
    e.preventDefault();
    $('#my-video').attr('src', vsrc);
    $('.cindy-modal-background').fadeIn();
  });
  $('.cindy-modal-close').click(function(e) {
    e.preventDefault();
    $('#my-video').attr('src', '');
    $('.cindy-modal-background').fadeOut();
  });
});

You're welcome.


Handy tips for pop up movie windows
#12

Thank you very much for your help! But I just tested it on IE9 and the video still continues playing. I'm giving up now. The customer I'm making this for will just have to accept that IE9 is not going to be fully supported.

Again, thanks very much for trying to help me solve this issue.


#13

http://jquery.com/browser-support/

jQuery 1.X supports IE7 and 8
jQuery 2.X supports IE9 but not lower

Rewrite code into native javascript.


#14

Thanks for the info. I'm not going to continue trying though, since its really not worth the struggle.

I had a look too how many people are actually still using IE9 ... and for May 2014 its 1.9%.

Thanks again for being so helpful though.


YouTube modal window works in publish mode, but not when I export and on server. Stumped
How to stop the video after the closing video modal pop up?
#15

@dennis @thesergie @cyberdave

Find a solution regarding this issue 'cant stop youtube video on ie9' I'll write here as solution specific to dennis problem.

1st. on webflow Custom Code, Add code to tag:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
   var player;
   function onYouTubePlayerAPIReady() {player = new YT.Player('my-video');}
</script>

Notes that i set 'my-video' there as you use it.

2nd. on webflow Custom Code, Add code before tag:

<script type="text/javascript">
   $(document).ready(function() {
       $('.cindy-modal').click(function(e) {
           e.preventDefault();
           $('.cindy-modal-background').fadeIn();
       });
       $('.cindy-modal-close').click(function(e) {
           e.preventDefault();
           $('.cindy-modal-background').fadeOut();
           player.stopVideo();
      });
   });
</script>

Notes that I use 'player.stopVideo();' to stop the video

3rd. I use iframe instead embed, code is different

 <iframe id="my-video" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/ufIVdMjPoVM?rel=0&amp;enablejsapi=1"></iframe>

to replace your embed code completely

 <embed id="my-video" height="450" name="my-video" type="application/x-shockwave-flash" width="800" src="http://www.youtube.com/v/ufIVdMjPoVM?rel=0&amp;showinfo=0&amp;list=UU0dnJMPsG_J_t0SvhI1kdlQenablejsapi=1&amp;version=3&amp;playerapiid=ytplayer" bgcolor="#000000" quality="high" allowscriptaccess="always" allowfullscreen="true">

I have tested here http://livehelper.webflow.com/

Cheers


#16

Wow thanks very much for this : ) I'm at home now but I will try it straight away tomorrow morning at work.


#20

Hi, pastiwibawa, I have built a pop up using the following method: http://forum.webflow.com/t/tutorial-how-to-create-a-modal-pop-up-in-webflow/1229

I have inserted a (Vimeo) video and would like it to automatically play and then close/reset once the movie has finished.. Is this possible?


#21

Yes!! This worked for me as well. Obviously change the classes to your own.

Make sure you add

id="my-video"

within the iframe of the actual movie embed and also paste

`javascript:stopthevideo();

into the url field of the link settings for the 'close-modal' button


#22