youtube iframe api with jquery

Envato Authors Theme Authors
1

If I create a youtube iframe with jquery and append it to the dom like so:

var videoIFrame = $('

I get a youtube video but how do I access youtube api from this?

2

I’ve only used the jsapi once, but I think you have to add an id to the end of your src string like this:

http://www.youtube.com/e/VIDEO_ID?enablejsapi=1&version=3&playerapiid=ytplayer

Then catching the reference to the player:

function onYouTubePlayerReady(playerId)  {
      
      ytplayer = document.getElementById("myytplayer");

}

But the problem with this is that the video is loaded in an iframe and communicating becomes tricky. I haven’t tried this before but here’s a possible solution:

3

Not sure why the syntax is so different from Vimeo iframe api.

For Vimeo after you create iframe the same way as above, you get the player reference like so:

vimeoPlayer = Froogaloop(videoIFrame[0]);

and thats it, you just listen for ‘ready’ event and you can use it.

But for youtube it goes like this:

http://apiblog.youtube.com/2011/01/introducing-javascript-player-api-for.html

I am not sure if this event onYouTubePlayerReady is going to be heard from jQuery.

4

Contact my mate nirvana tikku.

Via http://www.tikku.com/

He is a YouTube genius.

5

Thanks, I saw this TubePlayer plugin before, but I wanted to use the simplest of embeds.

6
Tean said

Thanks, I saw this TubePlayer plugin before, but I wanted to use the simplest of embeds.

He is so helpful, just ask him.