15

I've used the iframe function to embed videos, and I'm hiding/showing the content and videos through JavaScript.

I have one problem. When I press play on the first video, and then click on the next without stopping the first one, the first one just keeps on playing.

What can I do to stop the video in the "background", when showing new content?

$(function(){
    $("#link1").click(show1);
});

function show1(){
    $("#pic1").fadeIn();
    $("#pic2").hide();
}

I'm just using this simple JavaScript function, where the "pic1" and "pic2" id is the id of the div, the video are embedded in.

I just can't seem to make it work. I tried to put remove, but then you can't see the video again if you want to.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Sabine Quardon
  • 207
  • 1
  • 3
  • 17
  • possible duplicate of [video won't stop when div is hidden](http://stackoverflow.com/questions/8667882/video-wont-stop-when-div-is-hidden) – Rob W Jan 19 '12 at 19:09
  • See: http://stackoverflow.com/questions/1094397/how-can-i-stop-a-video-with-javascript-in-youtube – Ayush Jan 19 '12 at 19:10
  • 1
    @xbonez Your question is not about a **framed** youtube video. – Rob W Jan 19 '12 at 19:12
  • I've tried, but i get kinda confused of the togglevideo-thing. I got about 7 videos, which will mean 7 diff id's of video, and 7 id's for a thumbnail. Wouldn't that be a lot of code? [andreasbense.dk] It's on this page, under "video". – Sabine Quardon Jan 19 '12 at 19:19
  • I fixed it. Added "onClick="player.stopVideo();" to all my links. and it worked - in firefox.. Not sure it's working in google chrome. – Sabine Quardon Jan 19 '12 at 19:40

1 Answers1

27

This is an implementation of the YouTube player API, without loading additional files. To get this work, you have to suffix all of your <iframe>'s src attribute with ?enablejsapi=1.

Example (I broke the code over a few lines for readability, you can safely omit the linebreaks):

<div id="pic3">
    <iframe width="640" height="390"
            src="http://www.youtube.com/embed/Xub4grFLbQM?enablejsapi=1"
            frameborder="0" allowfullscreen></iframe>
</div>

<div id="tS2" class="jThumbnailScroller">
.. Removed your code for readability....
    <a href="#vid3" id="link3"><img src="images/thumbs/player2.jpg" height="85"/></a>
    ....

JavaScript + jQuery code:

$(function() {
    /* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
     *       if possible. Other videos will be paused*/
    function playVideoAndPauseOthers(frame) {
        $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
            var func = this === frame ? 'playVideo' : 'pauseVideo';
            this.contentWindow.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
        });
    }
    $('#tS2 a[href^="#vid"]').click(function() {
        var frameId = /#vid(\d+)/.exec($(this).attr('href'));
        if (frameId !== null) {
            frameId = frameId[1]; // Get frameId
            playVideoAndPauseOthers($('#pic' + frameId + ' iframe')[0]);
        }
    });
});
DanMan
  • 11,323
  • 4
  • 40
  • 61
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • This doesn't seem to work anymore, I get this error: `Blocked a frame with origin "http://www.mywebsite.com" from accessing a frame with origin "http://www.youtube.com". Protocols, domains, and ports must match.` when trying to access the `contentWindow` property – fregante Aug 21 '13 at 22:20
  • @bfred.it The method still works, or many other scripts (including the official YouTube iframe API) would break. What code are you using? – Rob W Aug 21 '13 at 22:23
  • 1
    Go [here](http://ontwik.com/css/css-preprocessors-with-jonathan-verrecchia/) and type `document.querySelectorAll('#video iframe')[0]` in the console. That alone will cause that error… but `document.querySelectorAll('#video iframe')[0].contentWindow.postMessage` doesn't. Go figure. My bad, I suppose the function works. – fregante Aug 22 '13 at 00:48