CODEWITHSUNDEEP
javascriptjqueryyoutube
Robbiegod
Robbiegod

Reputation: 1014

jquery youtube api - when a video stops playing i want it to disappear

This is my jquery code:

/* videoplayer controls */
$('#sjvslider li a').bind('click', function() {
$('#sjvslider li a').removeClass('active');
$(this).addClass('active'); // sets the thumbnail that what just clicked.
var vidNum = $(this).attr('rel');
var myVid = $("#video"+vidNum+"").html();
$('.videoplayer').html(myVid);
});

This is my HTML:

<div id="videoDiv" class="videoplayer"></div>

<div id="video1" >
<object width="508" height="273" id="myytplayer" data="http://www.youtube.com/v/CezWPkoWXbY?version=3&amp;hl=en_US&amp;rel=0&amp;enablejsapi=1&playerapiid=ytplayer">
 <param name="allowscriptaccess" value="always">
 <param name="bgcolor" value="#000">
 </object>
 </div>
 <div id="video2" class="novideo">
 <object width="508" height="273" id="myytplayer" data="http://www.youtube.com/v/qhluM6nrCVs?version=3&amp;enablejsapi=1&playerapiid=ytplayer">
 <param name="allowscriptaccess" value="always">
 <param name="bgcolor" value="#000">
 </object>
 </div>

And then i have some links with some textlinks to get the right videoID.

<ul id="sjvslider">
<li><a href="#" rel="1">VIDEO 1</a></li>
<li><a href="#" rel="2">VIDEO 2</a></li>
</ul>

Ultimately what I want to do is after the user clicks one of these links and plays the video, when the video stops playing i want it to disappear because I have a background image underneath the videos that i want to show again.

Is there some way to do this with jquery, perhaps accessing the youtube api?

Upvotes: 0

Views: 2466

Answers (1)

Scott
Scott

Reputation: 2793

Yup, you want to add an event listener using the API's player.addEventListener() method and listen for the onStateChange event. It broadcasts a number (0 for stopped, 2 for paused, etc.) based on the player's state (playing, paused, ended, etc.). When that event is triggered by the "stop" state, you can fire a jQuery function to .hide() or .remove() or whatever your movie container.

http://code.google.com/apis/youtube/js_api_reference.html#Events (the player.addEventListner() documentation is right above this anchor on that page, FYI. Easy to miss otherwise).

EDIT: note that you'll need to enable the YouTube API for the embedded video as described here.

Upvotes: 3

Related Questions