How to create video modal pop up?

Design help General
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?

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.

3

Hey @mktgmeg and @Busayo_Kupoluyi you can check out this info on how to stop the video using jquery: javascript - Stop a youtube video with jquery? - Stack Overflow

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.

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

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.

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: [Tutorial] How to create a modal/pop-up in Webflow - Webflow Tips - Forum | Webflow

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