CODEWITHSUNDEEP
jqueryiframe
user3696247
user3696247

Reputation: 29

stop vimeo video when div hides

I am a total noob at jquery and even though there are many related questions, I have not been able to get any of them to work on my own website. But your help would be greatly appreciated!

I am trying to embed some vimeo videos with Iframe. I would like the div with the Iframe, called "#player1" to open when i click on the div "#filmklip_thumb1" and I would like #player1 to close and the video to stop when I click #filmklip_thumb1 or anywhere else on the page.

How in the world is that done?

Upvotes: 3

Views: 1871

Answers (1)

Alec Menconi
Alec Menconi

Reputation: 745

If you want to stop the video rather than pause it then we don't need to preserve video progress and the simplest way is probably just to reset the iframe source. Here is an example that appears to be working as you want:

jsfiddle example:

http://jsfiddle.net/ULQcq/

jQuery:

$('#player1').hide();

$('#filmklip_thumb1').click(function(e) {
    e.stopPropagation();
    if($('#player1').css('display') != 'none') {
        var iFrame = $('#player1 iframe');
        var iFrameSRC = iFrame.attr('src');
        iFrame.attr('src',''); 
        iFrame.attr('src', iFrameSRC);
    }
    $('#player1').slideToggle('slow');
});

$(document).click(function() {
    if($('#player1').css('display') != 'none') {
        $('#player1').slideUp('slow');
        var iFrame = $('#player1 iframe');
        var iFrameSRC = iFrame.attr('src');
        iFrame.attr('src',''); 
        iFrame.attr('src', iFrameSRC);
    }
});

Upvotes: 1

Related Questions