Full transcript
Intro
0:10JEFF POSNICK: Hey, everybody.
0:11Welcome to this week's show of YouTube Developers Live.
0:14I'm Jeff Posnick coming to you from New York City.
0:16I'm a member of the Developer Relations team.
0:19And this week I'm really excited to talk to you about
0:21different ways of customizing the YouTube-embedded player.
0:24Before I get started though, I want a couple of ground rules
0:28to just talk about what we're going to be covering in
0:31today's show.
0:32There are a lot of different embedded players, and there's
0:34lots of ways to customize them.
0:36But for this particular show, we're going to be focusing on
0:39customizing be iframe-embedded player, which is our current
0:45recommended way of embedding videos on web pages.
0:48And we're going to specifically focus on the
0:50options that are most relevant for desktop web browsers.
0:54A lot of these customization options we'll talk about do
0:58have some effect with mobile browser playback, but not all
1:02of them do.
1:03And we're going to just focus today on how these options
1:06affect desktop playback.
1:08Another thing that we're not going to be covering today is
1:10using the JavaScript API for controlling playback.
1:15This is obviously a very interesting topic and a very
1:16important topic, it's just a little bit outside the scope
1:18of what we wanted to talk about.
1:20So we're not going to be covering any of the methods
1:23that you could use in JavaScript to start playback
1:25or control playback, or receive events when playback
1:29changes happen in the player.
1:31What we are going to be covering is things that are
1:33covered in the documentation on the specific page, so if
1:38you pull that up, we'll share that with you.
1:41And as I'm going through this demo, a lot of what I'm going
1:44to be covering refers to specific web pages.
1:47When we go back and post this video on YouTube, I'll have
1:50annotations linking to all the web pages, so that you could
1:52go there and check them out yourself.
Docs
1:56So this is our main jumping off point for talking about
2:00the customization that you could do to the
2:03YouTube-embedded iframe player.
2:06And you could get here from our main Developers.Googl
2:09e.com/YouTubedocumentation.
2:13And everything in this parameter section in the docks
2:17is fair game for what we're going to talk about now.
iframe-embedded player
2:20One other thing before I actually get into explaining
2:24these parameters is explain the two different types of
2:26ways that you can load the iframe-embedded player onto
2:31your web page.
2:32And we're kind of agnostic as to the way in which you load
2:35it, these parameters are going to behave the same way
2:37regardless.
2:38But I just wanted to point out that there are two different
2:40ways of doing it.
2:42The first way is using the iframes kind of like YouTube
2:48player, YT.
2:49Player constructor.
2:50And this is a more programmatic way of loading
2:53the iframe player onto your web page.
2:54So I have this jsFiddle right here that demonstrates what
2:58that will look like.
2:59It basically involves loading in this JavaScript API and
3:03calling the YT.
3:05Player constructor, and passing in the ID of a div
3:08that's on your page.
3:10And you'll see here that there is this playerVars section
3:13that you could pass in to the YT.
3:15Player constructors.
3:16So this is where you get to specify all the options that
3:19we're going to be covering today if you're using the YT.
3:21PLayer constructor.
3:23And just quickly jumping over here, this is where I stole
3:27that code from in our Getting Started guide
3:30for the iframe API.
3:32We talk about how you could actually get that code.
3:36So feel free to borrow it there or from that jsFiddle.
3:40The second way that you load the iframe player onto your
3:41page is just with a simple iframe tag that you could add
3:45to any web page.
3:47And this has the same sort of parameters that the YT.
3:50Player constructor is, kind under the hood.
3:52They really end up creating the same thing.
3:54Just that the YT.
3:55Player constructor is a programmatic way of creating
3:58this tag using JavaScript.
4:00This is if you're just writing out [? initiable ?]
4:02template, or even if you're not a JavaScript programmer at
4:06all and just want to include some HTML on your page, you
4:09could use this tag.
4:12And the same parameters we are going to be talking about can
4:15go at the very end of the URL that you use as a source of
4:19the iframe tag.
4:20So over here we have autoplay equals 0 and
4:23controls equals 0.
4:25And that corresponds to what we're seeing over here for the
4:29playerVars.
4:30And the actual documentation for using that iframe tag is
4:36found over here.
4:38If you look in the docs over here, we give some examples.
4:44So that's the ground rules for how you actually will use
4:47these parameters that we are going to be
4:49describing in your own code.
4:52So I just wanted to run through pretty much from the
4:54top, all these parameters here.
4:56We do have really nice explanations what they mean in
5:00the documentation.
5:01So it's going to be a little bit repetitive in some cases.
Autohide
5:05But I did want to highlight some specific ones that are
5:08the most useful.
5:09So autohide comes in handy quite a bit.
5:13This is something that controls the behavior of the
5:17controls, more or less, that are on the bottom of the
5:21YouTube Player.
5:22It's not necessarily the initial state of the controls,
5:26but it's more like what happens the controls once
5:28playback starts.
5:30And I'm going to demonstrate the ways of setting those
5:33different values by going to this page over here, which is
5:37our YouTube player demo.
5:39So this is another really great resource.
5:42And it's an alternative to writing this code over here or
5:47writing this in jsFiddle.
5:48It's just a way to play around with these parameters in a
5:51live setting.
5:54And we can think of it like our API explorer, if you've
5:57ever used that for our data APIs.
6:00This is the equivalent for our player APIs.
6:03So what it lets you do is go over here on the right and
6:06start choosing different values for the parameters.
6:09And I'm not going to do this for every single parameter
6:11that we didn't talk about, but just to show you how you could
6:15experiment in real time without having
6:16to write any code.
6:18Let me just try setting autohide to 0 over here.
6:21I'm going to click Update Player.
6:24And once I set it, Begin Playback.
6:28This is a very old video.
6:31Actually, part of what I plan on doing is replacing the
6:34default video that we use in this demo with this video, so
6:37we'll have a very meta experience, if you happen to
6:39be watching this while on the demo page trying out these
6:42parameters.
6:44So the main thing to keep in mind though is that the
6:47controls at the bottom over here did not
6:48disappear during playback.
6:51And if I were to go over here and change the autohide to 1,
6:56Update Player--
6:57it says, loading in the player with the parameters--
7:03you'll see that when I mouse over, the controls are there.
7:05When I move the mouse away, the controls disappear.
7:08So for experiences where you want maybe a more of lean-back
7:13type of situation, where people aren't going to be
7:15interacting with the controls, or you don't want the controls
7:17to overlay the video playback, it's a very useful parameter.
Autoplay
7:21Autoplay is next on the list alphabetically.
7:25Somewhat self-explanatory, if you add in the autoplay
7:27parameter, then the video will start playing back as soon as
7:31the iframe embed is loaded on the page.
7:34I'll give a quick demo of that over here.
7:38And this time, instead of using the player demo page,
7:43I'm going to use that jsFiddle that we have set up.
7:46And I'm going to just change the autoplay value to 1.
7:48I'm going to click Run.
7:50And you could see, here's the embed.
7:52It started playing as soon as the page loads.
7:55So there are certain scenarios where that's useful, certain
7:57scenarios where it's not.
7:58You have to use your judgment as to whether autoplaying is
8:02the right thing to do.
CC load policy
8:04cc_load_policy is something that controls whether closed
8:09captions or subtitles are displayed by default.
8:13And the default behavior-- we don't set anything for
8:17cc_load_policy--
8:18is that the user's preferences [? basic ?] on YouTube.
8:21There is a way of going in and saying whether you want closed
8:23captions or you don't want closed captions.
8:26That's normally what takes effect.
8:27If you have a specific video and you know that you always
8:29want the closed captions to be shown, you could set
8:31cc_load_policy to 1.
Color
8:34Color's a bit interesting.
8:36It's not something that I see widely used and necessarily,
8:41but there are some cases where you might want a little bit of
8:44flair, let's say, in your player.
8:45And you don't want the default behavior.
8:48So I'm going to go to the player demo page really
8:53quickly and just show you what it does.
8:54You could set color to white instead of red, and you update
9:02the player.
9:05Controls should look slightly different depending upon
9:06whether they're red or white.
9:08So it just basically changes the branding a little bit on
9:11the player.
9:13Not necessarily the most useful thing in the world, but
9:15it does give you a little bit more control.
Controls
9:18Speaking of control, next item alphabetically is controls.
9:22And this is actually quite useful.
9:24There are cases where you can actually see a lot of
9:29performance benefits by changing this value from the
9:33defaults to a specific option, which is 2.
9:38We have a note in the documentation explaining more
9:40about what this does.
9:42And if you read the note, it says that controls=2 can give
9:45you a performance improvement over the default behavior.
9:49And the reason why that is is controls=2 has a way of
9:53loading the iframe embedded player that does not
9:55initialize the underlying Flash player by default.
10:00It doesn't initialize it until you actually click on the
10:04video thumbnail to start the playback.
10:07This obviously only applies to playbacks that do involve the
10:12Flash player.
10:13The iframe player might decide that HTML5 video is going to
10:16be used instead, in which case this isn't quite as important.
10:19But in situations where Flash playback is being used, you
10:21could really see a significant performance benefit from
10:24setting controls=2.
10:26And that might be the default that we use at some point in
10:29the future, as mentioned here, as soon as some UI issues are
10:33worked out.
10:34And I'm going to give you an example of how you could see
10:37that performance benefit.
10:39It mainly comes across when you have--
10:41let's say, I don't want to say a specific number, but if you
10:44have multiple iframe embeds on the same page.
10:46So this one over here has--
10:48I think there might be 50 from the Google Developers channel.
10:52So the first thing that we're going to look at is behavior
10:56pretty much by default, where there's controls=1 or if you
11:00leave out controls.
11:01It's the default.
11:02And it can take some time for these underlying Flash players
11:08to all initialize, and can add some latency to the point
11:12where things look like they're ready to be
11:15interacted with on the page.
11:17So not necessarily the best user experience.
11:20If you take the same thing and you change it to controls
11:22equals 2 explicitly, then you should see a much better
11:26performance.
11:27It's quite remarkable, actually.
11:30So what's going on?
11:31[? You can see ?] now again, it's just loading in these
11:33thumbnails.
11:34It's not initializing the Flash player for each video.
11:38And you could have--
11:40I don't want to say you should put thousands of embeds on the
11:42same page-- but if you do happen to have a large number
11:45of embeds on the page, you will see a difference.
11:49So very important to keep that in mind.
11:50A few other parameters that are not
11:53necessarily as exciting.
Disable keyboard (disablekb)
Enable JSAPI
12:09This particular parameter is quite important, the
12:13enablejsapi.
12:14And what it'll let you do is ensure that you are able to
12:18talk to the iframe player on the page using
12:21the JavaScript API.
12:22So as I mentioned, we're not actually going to be covering
12:25anything about the JavaScript API in this particular
12:28session, but plenty of people have used it.
12:31And the one case where you really need to be sure you're
12:34explicitly setting this is when you're writing the iframe
12:37tag directly to the page.
12:41So kind of like this.
12:45Because when you're using the YT.
12:46Player constructor, it pretty much will be set automatically
12:50for you by default.
12:52Just because by virtue of the fact that you're using
12:54JavaScript to initialize the player, chances are you are
12:57going to want to talk to the player with JavaScript.
12:59So it always gets set for you.
13:00But that's not the case if you explicitly are writing an
13:03iframe tag to a page.
13:04So you really do need to make sure there that you have
13:06enabled jsapi set to 1.
13:10And that's necessary in order to talk to the iframe player.
End tag (end)
13:17The end tag, and a little bit further down
13:20the alphabet is start.
13:22So these are two corresponding tags.
13:24This gives you a really easy way of putting an embed on a
13:27page that has its custom end time and a custom start time.
13:31So if you have a three-minute video and you really want to
13:35embed 30 seconds in the middle of the video, you could use
13:37those two tags to do it.
13:38As soon as playback reaches the end tag, playback will
13:43effectively stop.
13:44So that could be useful.
Full screen (fs)
13:47fs parameter--
13:49not super useful anymore.
13:50Basically, it lets you control whether there is a full-screen
13:54button on the ActionScript 3.0 player.
13:56But I don't think it has an effect on the HTML5 player.
14:00So not really sure why you would want to change that.
14:04iv_load_policy is something that controls whether, I guess
Iv load policy aka annotations
14:07interactive video annotations--
14:11for lack of a better way of describing it-- is shown on
14:14your video by default.
14:16So there's a couple of different values over here.
14:18You use 1 or 3.
14:20Basically, setting at 1 will make sure that those
14:22annotations are shown.
14:23Setting it to 3 will make sure that they're
14:24not shown by default.
14:26But at any point, the user can change the setting explicitly
14:29in the player, if they want to show or hide the annotations.
Lists and list type
14:34List is a really interesting one.
14:36And there is quite a bit to talk about with list.
14:39So I'm actually going to defer at this point to a whole blog
14:42post that we put together to talk about the different types
14:46of values that the list parameter and the listType
14:51parameter, which is an associated
14:53parameter, can take.
14:54I'll link to this blog post in the video annotations, so you
14:56can read it in more detail.
14:58But the long and short of it is that it's a really easy way
15:01to take a simple embedded player on your page and use
15:05that to display a list of videos without having to hard
15:09code the video IDs in advance.
15:11So you could have one specific player on your page and say,
15:14play back the most recent videos from a specific YouTube
15:17channel or specific playlist or specific search term, even.
15:23So you could say, this is an embedded player that will show
15:26the latest videos that match the search
15:29from the YouTube API.
15:30Something along those lines.
15:32It's quite useful.
15:33I don't think as many people know about it as they should.
15:36So hopefully people will watch this and start using it a
15:38little bit more.
15:40listType goes hand in hand with the list parameter.
15:43There is a loop parameter.
15:45And the loop parameter will--
Loop
15:49as explained in the documentation--
15:51allow you to automatically restart playback of a video
15:55when the playback has ended.
15:57You have to have a little bit of a hack, if you're trying to
16:00do this for a single video, where you create a playlist
16:02that has only one video entry in it.
16:04So we have a little bit more info there.
Modest branding
16:06modestbranding is something that's covered in a different
16:09blog post, which we will also link to from the annotation.
16:12And it talks about the option down here at the bottom.
16:17It's not exactly a fully logoless player.
16:20There still is a YouTube logo involved that shows, I think,
16:25on the pause screen in the upper right-hand corner, or in
16:27the queued screen.
16:29But it is one parameter that you could set to tone down the
16:33YouTube branding on the player.
16:36And that's something that you might want to keep in mind if
16:40you have a scenario where you want to embed, but don't want
16:43to make it fully YouTubed.
Origin
16:47The origin parameter is something that can be used
16:51when you are using the iframe embed tag, and you're going to
16:55be interacting with the iframe embed using JavaScript.
17:00So as mentioned before, you might want to explicitly put
17:02in enablejsapi.
17:03You also might want to put in the origin
17:06parameter over here.
17:08And you set it equal to the full URL for your web page.
17:12And this is a security mechanism to make sure that
17:17only JavaScript that's run from your host web page is
17:20able to talk to the player.
17:23And if you're using the YT.
17:24Player constructor, it gets set automatically for you.
17:27So this is another instance where you really only have to
17:29worry about this when you're explicitly writing out an
17:32iframe tag.
17:34And sometimes people run into issues where they explicitly
17:38were using the iframe tag, and they're trying to talk to it
17:41using JavaScript, but their code just isn't working.
17:45One thing to debug in that case is check to see whether
17:47you are setting the origin parameter.
17:49And if you are, make sure that it's really set to the full
17:53URL of the host name for your site.
Playerapiid
Playlist
18:06There's a playlist parameter which is easily confused with
18:10the list parameter.
18:11And it is something that actually takes in a different
18:13set of values.
18:14The playlist parameter takes in a list of video IDs.
18:18So this does not have to be a real playlist, a
18:20[? list that ?] exists on YouTube.
18:21It doesn't have to be anything that uploads
18:26from a specific channel.
18:27It could just be a list of any video IDs that you want.
18:30And it's a way of generating a dynamic, on-the-fly playlist.
Rel
18:35So some use cases where that might be useful.
18:39There's the rel parameter.
18:41And this controls whether or not the end screen of a video
18:45will display related videos or not.
18:49Most folks are familiar with the fact that once you reach
18:51the end of a YouTube video, you'll see some configuration
18:55of thumbnails with suggestions for other videos to play.
18:59We do have the ability to turn that off if you feel like you
19:01do not want that on your embeds.
Showinfo
19:06showinfo is something that will control what is displayed
19:12initially in the queued states.
19:15There's ways of taking the default behavior and kind of
19:18toning it down a bit, again, where you don't see quite as
19:20much before the video starts.
19:23And you can set it to show info equal
19:250, if you want that.
19:27showinfo's actually used in another case.
19:29And that's when you're using the list player.
19:31And explicitly setting showinfo equal to 1 will make
19:36it so that there is a list of queued videos in the playlist
19:41in your list player.
19:42So if we look over here, this is a case where
19:44showinfo is set to 1.
19:47This is a playlist player that's loading everything from
19:49Google Developers.
19:50And you'll see, before playback has even started, you
19:52have this handy thumbnail for all the videos that are queued
19:56up in the playlist for the next videos.
19:58It will let you choose what you want to start with.
20:00So it is actually quite useful for scenarios where you're
20:04doing the list player.
Start
Theme
Deprecated parameters
20:29There are now a couple of deprecated parameters.
20:32I'm not going to cover those.
20:33They're deprecated for a reason.
20:34We don't want folks using them anymore.
20:36I wanted to point out that there are occasionally--
20:40I don't want to say rumors-- but certain parameters out
20:44there that people pass around and say, hey, you can use this
20:46player parameter to force HTML5 playback, or use this
20:51player parameter to force playback in a certain quality
20:53level or something along those lines.
20:56Those are undocumented for a reason.
20:58We really do not want people to use parameters that aren't
21:01explicitly mentioned in the documentation, partly because
21:04we're not fully committed to supporting them.
21:06They might sometimes work in some cases, and they might
21:10stop working at any time in the future.
21:12So we really don't want people to build things that rely on
21:15those parameters.
21:17And there's also just cases where we want control to be in
21:22the hands of the person who's viewing the embed.
21:25So we want control over the default playback to really lie
21:30in the person who's using the web browser and might have
21:33Flash enabled.
21:35Or the default auto quality for the quality level in many
21:41cases gives the best playback experience.
21:44So if you don't see something listed as a supported
21:47parameter, please don't use it.
21:49And if you do happen to find some parameters, please don't
21:52complain if they ever break at some point in the future.
21:55I guess that's the main takeaway.
Wrap up
21:59That covers the list of all the supported parameters.
22:01We had a lot of different web material here.
22:04And be sure to check out the annotations on the video for
22:06links to everything that we covered today.
22:09Thanks very much for watching.
22:13And we'll see everybody next week.
22:17Cheers.