Question

-1

Hide/show in JavaScript - stop playing YouTube iframe video

rated 0 times [ 0] [ 1] / answers: 1 / hits: 29592 / 13 Years ago, thu, january 19, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackelyn

Add To Favorites

Follow

Total Points: 303

Total Questions: 103

Total Answers: 102

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

jackelyn questions

1 NodeJS Sendgrid 401 unauthorized

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Get accessToken in auth0

Sun, Feb 28, 21, 00:00, 3 Years ago

1 How to target a styled component inside another styled component?

Fri, Jan 1, 21, 00:00, 3 Years ago

1 Refresh WooCommerce product page on added to cart

Mon, May 25, 20, 00:00, 4 Years ago

1 How to pass data fetched in _app.js to a component

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 13 Years ago kalaveronicab · Accepted Answer

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]);

        }

    });

});