Using JQuery toggle feature to show/hide a youtube but can't get it to stop playing on hide

Question

I am using the jquery function to toggle a youtube video element on my site. It works great and shows/hides its as needed. However I can't find a way to stop the video playing on hiding the div. I keep reading about destroying the element then recalling it on the toggle but I don't know enough about the code to know how or where to do that within the toggle functions. Any help would be amazing. I've added my code below

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

        .vidblock
        {
            background:#ccc;
            width:430px;
            height:320px;
            display:none;
        }

    </style>

    <script type="text/javascript">

        $(document).ready(function(){

            $('.toggle').click(function(){
                $('.vidblock').toggle("slow");
            });

        });

    </script>

and

<h3><a href="#" class="toggle">Click to view a video of how and where to enter <?=$merch_array['Name']?> <?=$merch_array['Term_Used']?>s</a></h3>

http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery — zdrsh, Oct 20 '11 at 13:26

score 2 · Answer 1 · answered Aug 07 '12 at 20:55

Okay! This one took me a little while to figure out, and when I tell you it's going to make sense.

Make sure you are calling the youtube api:

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

When hiding your div, use jquery to change the source of the video to the same video, without using autoplay. This stops the video from playing, and also sets it back up.

Another cool thing I found, is when opening my div, I turned it on autoplay.

You can see a demo on this page: http://advantageanywhere.com/index.aspx?sid=250 Click on the play link and it's going to open a lightbox (similar to what you are doing, showing and hiding the div. In it's original state I have it sitting there while hidden as a regular embed link. Once clicked, then it turns to autoplay, then when escape or X is clicked, it will close the lightbox and also change the video back to a normal embed (stops the playing)

We will take for example the following video: The original embed from youtube [adding AN ID ( youtube ) to it to target in jquery, and the parm for youtube api ( ?enablejsapi=1 ) ]:

That is how you should have the image started off in it's hidden div.

Once the div is opened this is the jquery you need:

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */

Now, when the div is being hidden, this is the jquery you need:

$('#youtube').attr("src", "http://www.youtube.com/embed/AAbOWbquDWU?enablejsapi=1"); /* stops video from playing on youtube after hiding div */

Below is the entire script I have setup. I tried throwing this together for you in a fiddle but I don't have the time right now and just stumbled upon your question when I am trying to punch out a deadline.

If you have any other questions I don't mind helping out, please.

$(window).load(function(){
    var KEYCODE_ESC = 27;
    $(document).keyup(function(e) {
        if (e.keyCode == KEYCODE_ESC) { closeLightBox(); }  
    });

    function closeLightBox() {
         $("#lb1, #lb4").fadeOut();
         $("#featureContent, #videoContent").hide();
         $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1"); /* stops video from playing on youtube after hiding div */
    }           
     /* ------------   Light Box 4 Video ------------- */

    var lightBox4 = $('#lb4'),
    videoContent = $('#videoContent');

    $('#anywhereVideo').click(function() {
        lightBox4.fadeIn(function() {
            videoContent.show(); 
                $('#youtube').attr("src", "http://www.youtube.com/embed/clJe9U38ids?enablejsapi=1&autoplay=1"); /* starts youtube video after lightbox opens */

        });

    });


    $('#close4').click(function() {
        closeLightBox();

    });   
    });

ipr101 · Answer 2 · 2011-10-20T14:33:28.210

0

You could use 'detach' -

$(function() {
    var savedNodes;

    $('.toggle').toggle(function() {
        $('.vidblock').hide('slow', function() {
            savedNodes = $('yourplayerid').detach();
        });
    }, function() {
        $('.vidblock').append(savedNodes)
        $('.vidblock').show('slow');
    });

});

Demo - http://jsfiddle.net/Sf4LT/2/

edited Oct 20 '11 at 14:33

answered Oct 20 '11 at 13:26

ipr101

24,096
8
59
61

Instead of. I've updated the code to try and make it more relevant to your situation. – ipr101 Oct 20 '11 at 14:34
That looks like it would work great. unfortunatly its making it so i have to click the toggle link twice for it to show the video. And i have no idea what the player id is:S – user1005277 Oct 23 '11 at 13:04

score 0 · Answer 3 · answered Oct 20 '11 at 13:30

0

You don't have to destroy the element, just use the YouTube JavaScript API ( http://code.google.com/apis/youtube/js_api_reference.html ) to pause or stop the video.

You give the object a playerapiid, then you can target it with JavaScript.

answered Oct 20 '11 at 13:30

swatkins

13,530
4
46
78

Does this work with the new embed style? The new embed seems to allow html5 etc so i'd love to stick with that one. – user1005277 Oct 20 '11 at 13:32
Try this one for the html5 embed: http://code.google.com/apis/youtube/iframe_api_reference.html – swatkins Oct 20 '11 at 13:35

Using JQuery toggle feature to show/hide a youtube but can't get it to stop playing on hide

3 Answers3