My customers are utilizing that old embed approach to with the tag YouTube provides you with rather than the iframe. I am trying to puzzle out how you can identify the ball player condition (when it is paused, playing etc) whenever a user interacts by using it in order to pause the recording once the user clicks to another slide.

Presently using Wordpress I've got a metabox that enables these to paste within the YouTube embed code after which I output that block of code to the slider. I am focusing on my localhost (example: http://mysite.dev). Something to understand is the fact that potentially the consumer might have multiple videos around the slider.

For that existence of me I can not obtain the YouTube API to complete.

1) This is actually the youtube embed object they're pasting in to the box

<object width="475" height="271">
    <param name="movie" value="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src="http://www.youtube.com/v/soefG7iisoE?wmode=opaque&version=3&enablejsapi=1&modestbranding=1&autohide=1&rel=0&hl=en_US" type="application/x-shockwave-flash" width="475" height="271" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

2) This video is within a slider I created using a div of:

<div class="videoContainer">
   [there youtube embed code outputs here - see point 1]
</div>

I am using JQuery and I have attempted calling the API like so:

function onYouTubePlayerReady(playerId) {
    // using the class and the tag as selector because there could be 
    // multiple videos *and* the user might not put an ID in the object tag
    ytplayer = $('.videoContainer object'); 
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}

function onytplayerStateChange(newState) {
    alert("Player's new state: " + newState);
}

I've got a function known as stopCycle contained inside a jQuery(document).ready(function($) ) code block and it is this function that I have to call once the user clicks to another slide.

Here are my questions:

  1. Should i call any exterior JavaScript file?
  2. Inside my JQuery document ready block how do i call the the YouTube api to determine when the video is playing?
  3. Can there be other things that i'm missing during my code or something like that you need to see?

I am wondering if it might be easier to ask them to only go into the YouTube URL after which I'll output the recording using JQuery SWFObject. What I'm not sure how you can do is loop the video for every slide (total of 5). Therefore if they'd a relevant video for every slider wouldso would I actually do that?

I understand... totally loaded filled with questions here.

From things i help you come with an error:

ytplayer = $('.videoContainer object'); 
//should be
ytplayer = document.getElementById("myytplayer");

You'll be able to use the api calls here, and everything should work good

The reasons you cannot make use of a jQuery selector for the reason being the is expecting an <embed> element. What jQuery returns is a range of all elements matching the selector.

To reply to the questions you have:

  • 1) Not unless of course you've your js within an exterior file
  • 2) To obtain the current video ytplayer .getVideoUrl()
  • 3) as stated formerly
  • 4/5) You are able to setup a playlist by using this: ytplayer .cuePlaylist