Using the JQuery switch function to show / hide a youtube, but can not prevent it from playing on the cache

advertisements

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>


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

    });
    });