Hi, my name is Ikai Lan.
Welcome to another edition of YouTube Developers Live.
Right now, today I'll be showing you guys some tricks
that I have when I'm working with the Player API,
and I've been trying to either debug some issues
or share some code with some people on my team.
So let's go ahead and switch over to my laptop.
Those of you that have been using Player API
are probably used to seeing this reference by now.
This is what I always go to.
This and the JavaScript API, these are reference docs
that I'm commonly using when I'm working with the Player API.
I'm also frequently using the YouTube player demo,
because this lets me see all the different options that I have.
But what this doesn't do very well
is allow me to share these options
and to share customizations as well as edit them in real time.
Now, those of you that have been doing
web development for a while know that in Chrome, Firefox
you can click Inspect Element.
And you have the entire DOM tree available in these tools.
You can also access everything via the JavaScript console.
And this is really nice, because you can run and test
JavaScript.
Oops, that's invalid JavaScript code.
And it's a REPL that you can use to test your code
and make sure things are working correctly.
Now, I'm going to take it one step further
and talk about some of the tools that we use on the team
that we think are pretty cool.
And these are online JavaScript IDEs.
A few of us-- Jeff and I, in particular-- we really
like using a tool called jsFiddle.
Now, jsFiddle, this is a really cool tool
that lets you specify HTML as well as JavaScript to go ahead
and test and run your code.
So this, we've got a very basic Flash Player here.
And you'll see that in this code I've created a link element.
I'm using jQuery.
And you can load jQuery over, as on the side
you could say, well, which JavaScript library do
I want to auto load?
I'm saying that once we click, I want to start the video,
so I'm going to click the Test Me link.
And it starts playing the video.
And that's really cool.
Now, I can't stop this, unfortunately.
So what I'm going to do now is I'm
going to go ahead and-- let me turn the volume down.
I'm going to go ahead and click Update
once I've made changes to my code.
And now I have a link that I can copy.
I can right-click, copy, and I can email this to my coworkers
or other friends who can just open that code up and start
testing it.
And every time you make a change in this code,
you can click Update.
Now, this isn't meant to be a tutorial about jsFiddle.
This is meant to show you some of the cool tools and tricks
that we use.
So you can go ahead and search for a tutorial on jsFiddle
on your favorite video site.
That is, of course, YouTube.
When I was looking, I found several good tutorials
on jsFiddle.
That's the basics of it.
You can also do things like tidy up the code, run a JSLinter.
And there's just a lot of different options that you have
when you're working with jsFiddle.
And of course, everything also works with the basic console.
If I were to inspect Element and go to the Console,
I could have this function do a console at log.
I would click Run, and that's what
it would do to update the HTML in JavaScript.
Click Run, and you would see that it's
logged into JavaScript Console.
So make use of all tools that are available.
Now I'm going to switch over real quick.
That was the Flash player.
I'm going to show you the IFrame player.
This IFrame player looks very similar.
This is-- I basically ported most of this code that's
on the IFrame API reference over.
So when I take a look at this code, it's pretty verbose.
So I've taken the headers.
I've loaded the script source.
Now, the IFrame player reference loads this asynchronously.
I'm just forcing it to load synchronously.
I'm creating a div.
And I'm just creating a test element here.
I'm going to click Test Me.
And that'll start playing the video, and that's really good.
That's really cool.
So over here, again, because I load the source,
I can load on YouTube IFrame API Ready.
And because I've also loaded jQuery,
I can just start using jQuery's functions
to make my life easier.
So once I'm done with this code, if I'm able to reproduce a bug
here, it's-- especially, if we're following bugs against
our public issues tracker.
And if you don't know where that is, it's at YouTube-- oops.
You search for YouTube API issues,
it's this link, gdata-issues.
Kind of an old name for an issues tracker.
But we still use this.
We look at this.
And this is a good way for you to file bugs
and to file what you expect and what you observe.
And those are the bug reports that help us out the most.
So that was all I had to show you today.
I just wanted to show you that it was possible.
And if one of the questions we usually get is, are we hiring?
The answer is yes.
Check us out at developers.google.com/jobs.
That's all I have for you guys today.
And thank you for tuning in today.