Question

I have a tabbed jquery slider that I’m using to display elements of an overall project on a page. One of those things happens to be a youtube video, but I’m not having any luck figuring out how to STOP the video when the user clicks through the other content in the slider.

I looked at other stackoverflow questions, but can’t find anything that’s in line with what I want, except here: Stop a youtube video with jquery?

BUT it seems excessive to add/remove the video to the dom to make this work when it can be done more simply with vimeo videos. (See http://www.taprootfoundation.org/ … and no, I can’t just use vimeo :S)

I’ve tried this:

$(document).read(function () {
    $("ul#subNav li a").click(function () {
        $('#video').stopVideo();
    });
});

I also tried changing $('#video').stopVideo(); to $(window).find(embed).stopVideo(); … or something like that, I don’t remember it off the to of my head.

And I tried this as well:

$(document).read(function () {
    $("ul#subNav li a").click(function () {
        var myPlayer = document.getElementById('video');
        myPlayer.stopVideo();
    });
});

“ul#subNav li a” is my list of links to control the slider
“#video” is the id I’ve given the embedded object. (I’m using the old Youtube embed, not the iframes.)

Any ideas how to do this with youtube videos specifically?

Answer 1

Okay, after some serious headaches and confusion looking through the Google API docs (Google owns Youtube) I pieced together code from their examples to make something work. It’s really not ideal because I don’t 100% understand what’s going on and why things weren’t working when I was trying to write my own equivalent.

My slider is set up to use divs as the “container” for each slide. This entire code goes into the div I want the video in.

<!--this is only displayed when the browser does not have flash or js -->
<div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.
</div>

<script type="text/javascript">
//calls the video player by ID so it can be accessed later
function onYouTubePlayerReady(playerId){ytplayer = document.getElementById("playerID");}
     //playerID is arbitrary, what you would normally give to your object or embed element
     var params = { allowScriptAccess: "always" };var atts = { id: "playerID" };

     //this next line totally replaces the object/embed element normally used.
     //be careful when replacing the URL below, only replace the URL up to the question mark (the end of the video ID), the bits after that are REQUIRED for this to work.
     //425/356 etc are sizes of the video
     swfobject.embedSWF("http://www.youtube.com/e/videoID?enablejsapi=1&version=3&playerapiid=ytplayer","ytapiplayer", "425", "356", "8", null, null, params, atts);

     //function to have the video play
     function play() {if (ytplayer) {ytplayer.playVideo();}}

     //function to have the video pause -- apparently using stopVideo isn't best practice. Check GoogleApi for more info: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
     function pause() {if (ytplayer) {ytplayer.pauseVideo();}}
</script>

This is my link code, found in a totally different div:

<a href="#one" rel="1" onclick="pause();"> One</a>
<a href="#two" rel="1" onclick="pause();"> Two</a>
<a href="#three" rel="1" onclick="play();"> Three</a>

I considered having the video autoplay (by using “play();” in the link) for the div containing the video but I think I actually won’t do that, autoplay videos drive me crazy on other peoples’ sites so I don’t want to subject other people to that on my own site.

So there you have it. Some code that works. Although I don’t totally know why. Hope someone else finds this helpful!

**Don’t forget to make sure you’ve got a swfobject.js file linked to your page!
I did this in the head of my document:

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><!--Uses Google API library-->

**UPDATED:
Does not work in Safari or Firefox, but does work in IE8 and Chrome. Curious to know why because it’s usually Firefox or IE that don’t play nice on their own, and Safari is webkit based like Chrome.

Any ideas you might have would be helpful. Until then I will work for a new solution and post it when/if I find it.

**Update #2: Does actually work in all four major browsers (Chrome, Safari, Firefox 3.6 & IE8 — not tested for less than IE8 or FF3.6) Turns out I needed to update plugins for both Safari and FF to support Flash so the non-flash message was in fact displaying when it should have. Please imagine me face-palming.

Yay for working solutions!