Open/close popup with Vimeo video auto play - Javascript

Question

I'm trying to create popup with Vimeo video inside. I have div on my page with id="showVideo". On click on that div I want to open popup (new div with id="opened-video" ). Div with id="opened-video" have iframe of Viemo video that looks like this

<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

This iframe is set to auto play using ?autoplay=1 parameter in src url.

This is my JavaScript

jQuery(document).ready(function(){

    jQuery('#showVideo').click(function() {
    jQuery('#opened-video').fadeIn().html('<iframe id="video-iframe" src="https://player.vimeo.com/video/102895556?autoplay=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><img src="<?php echo get_template_directory_uri()?>/images/resp-menu-close.png" alt="Close video" onClick="closeDiv()" id="close-video" />');
    }); 
});

and this works.

You will notice image tag in html() function, that's image that is used to close id="opened-video" and I do that with Javascript function

function closeDiv() {
        document.getElementById('opened-video').style.display = "none";

    }

and this works too, but with one problem, opened-video is set to display="none" but Vimeo video is still playing in background, I hear sound. How to stop video working when I press on id="close-video" image? How I can remove src parameter ?autoplay=1 when I click on image? Or any other suggestion?

This is HTML

<img src="<?php echo get_template_directory_uri()?>/images/play-real.png" alt="Play real" id="showVideo"  />

<div class="video-front" id="opened-video">     
    </div>

Chaya Sandamali Chaya Sandamali · Accepted Answer · 2015-08-06T17:47:02

Inside your closeDiv() function, insert these two lines after making the display none,

$('iframe').attr('src', "");
$('iframe').attr('src', $('iframe').attr('src'));

So that it will look like,

function closeDiv() {
    document.getElementById('opened-video').style.display = "none";
    // Removes the src
    $('iframe').attr('src', "");    
    // Reloads the src so that it can be played again
    $('iframe').attr('src', $('iframe').attr('src'));     
}

Working DEMO

Open/close popup with Vimeo video auto play - Javascript

1 Answers