YouTube Developers Live: Embedded Web Player Customization

0:10 JEFF POSNICK: Hey, everybody.

0:11 Welcome to this week's show of YouTube Developers Live.

0:14 I'm Jeff Posnick coming to you from New York City.

0:16 I'm a member of the Developer Relations team.

0:19 And this week I'm really excited to talk

0:20 to you about different ways of customizing the YouTube-embedded player.

0:24 Before I get started though, I want a couple of ground rules to just talk

0:28 about what we're going to be covering in today's show.

0:32 There are a lot of different embedded players,

0:34 and there's lots of ways to customize them.

0:36 But for this particular show,

0:38 we're going to be focusing on customizing be iframe-embedded player,

0:42 which is our current recommended way of embedding videos on web pages.

0:48 And we're going to specifically focus on the options

0:50 that are most relevant for desktop web browsers.

0:54 A lot of these customization options we'll talk

0:57 about do have some effect with mobile browser playback, but not all of them do.

1:03 And we're going to just focus today

1:05 on how these options affect desktop playback.

1:08 Another thing that we're not going to be covering

1:10 today is using the JavaScript API for controlling playback.

1:15 This is obviously a very interesting topic and a very important topic,

1:17 it's just a little bit outside the scope of what we wanted to talk about.

1:20 So we're not going to be covering any of the methods

1:23 that you could use in JavaScript to start playback or control playback,

1:26 or receive events when playback changes happen in the player.

1:31 What we are going to be covering is things

1:33 that are covered in the documentation on the specific page,

1:37 so if you pull that up, we'll share that with you.

1:41 And as I'm going through this demo,

1:43 a lot of what I'm going to be covering refers to specific web pages.

1:47 When we go back and post this video on YouTube,

1:49 I'll have annotations linking to all the web pages,

1:51 so that you could go there and check them out yourself.

1:56 So this is our main jumping off point for talking about

2:00 the customization that you could do to the YouTube-embedded iframe player.

2:06 And you could get here

2:08 from our main Developers.Googl e.com/YouTubedocumentation.

2:13 And everything in this parameter section in the docks is

2:17 fair game for what we're going to talk about now.

2:20 One other thing before I actually get

2:23 into explaining these parameters is explain the two

2:25 different types of ways that you can

2:28 load the iframe-embedded player onto your web page.

2:32 And we're kind of agnostic as to the way in which you load it,

2:35 these parameters are going to behave the same way regardless.

2:38 But I just wanted to point out that there are two different ways of doing it.

2:42 The first way is using the iframes kind of like YouTube player, YT.

2:49 Player constructor.

2:50 And this is a more programmatic way

2:52 of loading the iframe player onto your web page.

2:54 So I have this jsFiddle right here that demonstrates what that will look like.

2:59 It basically involves loading in this JavaScript API and calling the YT.

3:05 Player constructor, and passing in the ID of a div that's on your page.

3:10 And you'll see here that there is this playerVars

3:13 section that you could pass in to the YT.

3:15 Player constructors.

3:16 So this is where you get to specify all the options

3:19 that we're going to be covering today if you're using the YT.

3:21 PLayer constructor.

3:23 And just quickly jumping over here, this is where I stole that code

3:27 from in our Getting Started guide for the iframe API.

3:32 We talk about how you could actually get that code.

3:36 So feel free to borrow it there or from that jsFiddle.

3:40 The second way that you load the iframe player onto your page is

3:42 just with a simple iframe tag that you could add to any web page.

3:47 And this has the same sort of parameters that the YT.

3:50 Player constructor is, kind under the hood.

3:52 They really end up creating the same thing.

3:54 Just that the YT.

3:55 Player constructor is a programmatic way of creating this tag using JavaScript.

4:00 This is if you're just writing out[?

4:02 initiable?] template, or even if you're not a JavaScript programmer at all

4:06 and just want to include some HTML on your page, you could use this tag.

4:12 And the same parameters we are going to be talking about can go at the very

4:16 end of the URL that you use as a source of the iframe tag.

4:20 So over here we have autoplay equals 0 and controls equals 0.

4:25 And that corresponds to what we're seeing over here for the playerVars.

4:30 And the actual documentation for using that iframe tag is found over here.

4:38 If you look in the docs over here, we give some examples.

4:44 So that's the ground rules for how you actually will use

4:47 these parameters that we are going to be describing in your own code.

4:52 So I just wanted to run through pretty much from the top,

4:55 all these parameters here.

4:56 We do have really nice explanations what they mean in the documentation.

5:01 So it's going to be a little bit repetitive in some cases.

5:05 But I did want to highlight some specific ones that are the most useful.

5:09 So autohide comes in handy quite a bit.

5:13 This is something that controls the behavior of the controls,

5:18 more or less, that are on the bottom of the YouTube Player.

5:22 It's not necessarily the initial state of the controls,

5:26 but it's more like what happens the controls once playback starts.

5:30 And I'm going to demonstrate the ways of setting

5:33 those different values by going to this page over here,

5:36 which is our YouTube player demo.

5:39 So this is another really great resource.

5:42 And it's an alternative to writing this code

5:46 over here or writing this in jsFiddle.

5:48 It's just a way to play around with these parameters in a live setting.

5:54 And we can think of it like our API explorer,

5:56 if you've ever used that for our data APIs.

6:00 This is the equivalent for our player APIs.

6:03 So what it lets you do is go over here

6:06 on the right and start choosing different values for the parameters.

6:09 And I'm not going to do this for every

6:11 single parameter that we didn't talk about,

6:12 but just to show you how you could experiment

6:15 in real time without having to write any code.

6:18 Let me just try setting autohide to 0 over here.

6:21 I'm going to click Update Player.

6:24 And once I set it, Begin Playback.

6:28 This is a very old video.

6:31 Actually, part of what I plan on doing is replacing

6:33 the default video that we use in this demo with this video,

6:36 so we'll have a very meta experience, if you happen to be watching this while

6:40 on the demo page trying out these parameters.

6:44 So the main thing to keep in mind though is

6:46 that the controls at the bottom over here did not disappear during playback.

6:51 And if I were to go over here and change the autohide to 1,

6:56 Update Player— it says,

6:58 loading in the player with the parameters— you'll see that when I mouse over,

7:04 the controls are there.

7:05 When I move the mouse away, the controls disappear.

7:08 So for experiences where you want maybe a more of lean-back type of situation,

7:13 where people aren't going to be interacting with the controls,

7:16 or you don't want the controls to overlay the video playback,

7:19 it's a very useful parameter.

7:21 Autoplay is next on the list alphabetically.

7:25 Somewhat self-explanatory, if you add in the autoplay parameter,

7:27 then the video will start playing back as soon

7:31 as the iframe embed is loaded on the page.

7:34 I'll give a quick demo of that over here.

7:38 And this time, instead of using the player demo page,

7:43 I'm going to use that jsFiddle that we have set up.

7:46 And I'm going to just change the autoplay value to 1.

7:48 I'm going to click Run.

7:50 And you could see, here's the embed.

7:52 It started playing as soon as the page loads.

7:55 So there are certain scenarios where that's useful,

7:57 certain scenarios where it's not.

7:58 You have to use your judgment as to whether

8:01 autoplaying is the right thing to do.

8:04 cc_load_policy is something that controls whether closed

8:09 captions or subtitles are displayed by default.

8:13 And the default behavior— we don't set

8:16 anything for cc_load_policy— is that the user's preferences[?

8:20 basic?] on YouTube.

8:21 There is a way of going in and saying whether

8:22 you want closed captions or you don't want closed captions.

8:26 That's normally what takes effect.

8:27 If you have a specific video and you know

8:28 that you always want the closed captions to be shown,

8:31 you could set cc_load_policy to 1.

8:34 Color's a bit interesting.

8:36 It's not something that I see widely used and necessarily,

8:41 but there are some cases where you might want a little bit of flair,

8:44 let's say, in your player.

8:45 And you don't want the default behavior.

8:48 So I'm going to go to the player demo

8:52 page really quickly and just show you what it does.

8:54 You could set color to white instead of red, and you update the player.

9:05 Controls should look slightly different depending

9:06 upon whether they're red or white.

9:08 So it just basically changes the branding a little bit on the player.

9:13 Not necessarily the most useful thing in the world,

9:15 but it does give you a little bit more control.

9:18 Speaking of control, next item alphabetically is controls.

9:22 And this is actually quite useful.

9:24 There are cases where you can actually see a lot of performance benefits

9:30 by changing this value from the defaults to a specific option, which is 2.

9:38 We have a note in the documentation explaining more about what this does.

9:42 And if you read the note, it says that controls=2 can give you

9:45 a performance improvement over the default behavior.

9:49 And the reason why that is is controls=2 has a way of loading

9:53 the iframe embedded player that does not

9:55 initialize the underlying Flash player by default.

10:00 It doesn't initialize it until you actually click

10:04 on the video thumbnail to start the playback.

10:07 This obviously only applies to playbacks that do involve the Flash player.

10:13 The iframe player might decide that HTML5 video is going to be used instead,

10:17 in which case this isn't quite as important.

10:19 But in situations where Flash playback is being used,

10:21 you could really see a significant performance benefit from setting controls=2.

10:26 And that might be the default that we use at some point in the future,

10:30 as mentioned here, as soon as some UI issues are worked out.

10:34 And I'm going to give you an example

10:36 of how you could see that performance benefit.

10:39 It mainly comes across when you have— let's say,

10:42 I don't want to say a specific number,

10:43 but if you have multiple iframe embeds on the same page.

10:46 So this one over here has— I think

10:49 there might be 50 from the Google Developers channel.

10:52 So the first thing that we're going

10:54 to look at is behavior pretty much by default,

10:57 where there's controls=1 or if you leave out controls.

11:01 It's the default.

11:02 And it can take some time for these underlying Flash players to all initialize,

11:09 and can add some latency to the point where things

11:13 look like they're ready to be interacted with on the page.

11:17 So not necessarily the best user experience.

11:20 If you take the same thing and you change it to controls equals 2 explicitly,

11:23 then you should see a much better performance.

11:27 It's quite remarkable, actually.

11:30 So what's going on?

11:31 You can see?] now again, it's just loading in these thumbnails.

11:34 It's not initializing the Flash player for each video.

11:38 And you could have— I don't want to say

11:41 you should put thousands of embeds on the same

11:43 page— but if you do happen to have a large number of embeds on the page,

11:47 you will see a difference.

11:49 So very important to keep that in mind.

11:50 A few other parameters that are not necessarily as exciting.

11:55 There's keyboard support for the ActionScript player.

12:00 I'm not really sure why you would want to turn this off.

12:03 I think it's actually kind of nice to keep it on, but we

12:05 do have the option of turning it off if you want.

12:09 This particular parameter is quite important, the enablejsapi.

12:14 And what it'll let you do is ensure that you are able

12:18 to talk to the iframe player on the page using the JavaScript API.

12:22 So as I mentioned, we're not actually going to be

12:25 covering anything about the JavaScript API in this particular session,

12:28 but plenty of people have used it.

12:31 And the one case where you really need to be sure you're explicitly

12:34 setting this is when you're writing the iframe tag directly to the page.

12:41 So kind of like this.

12:45 Because when you're using the YT.

12:46 Player constructor, it pretty much will be set automatically for you by default.

12:52 Just because by virtue of the fact

12:54 that you're using JavaScript to initialize the player,

12:55 chances are you are going to want to talk to the player with JavaScript.

12:59 So it always gets set for you.

13:00 But that's not the case if you explicitly are writing an iframe tag to a page.

13:04 So you really do need to make sure there that you have enabled jsapi set to 1.

13:10 And that's necessary in order to talk to the iframe player.

13:17 The end tag, and a little bit further down the alphabet is start.

13:22 So these are two corresponding tags.

13:24 This gives you a really easy way of putting an embed

13:26 on a page that has its custom end time and a custom start time.

13:31 So if you have a three-minute video and you really

13:35 want to embed 30 seconds in the middle of the video,

13:37 you could use those two tags to do it.

13:38 As soon as playback reaches the end tag, playback will effectively stop.

13:44 So that could be useful.

13:47 fs parameter— not super useful anymore.

13:50 Basically, it lets you control whether there is

13:53 a full-screen button on the ActionScript 3.0 player.

13:56 But I don't think it has an effect on the HTML5 player.

14:00 So not really sure why you would want to change that.

14:04 iv_load_policy is something that controls whether,

14:07 I guess interactive video annotations— for lack of a better

14:12 way of describing it— is shown on your video by default.

14:16 So there's a couple of different values over here.

14:18 You use 1 or 3.

14:20 Basically, setting at 1 will make sure that those annotations are shown.

14:23 Setting it to 3 will make sure that they're not shown by default.

14:26 But at any point, the user can change the setting explicitly in the player,

14:31 if they want to show or hide the annotations.

14:34 List is a really interesting one.

14:36 And there is quite a bit to talk about with list.

14:39 So I'm actually going to defer at this point to a whole blog post that we put

14:44 together to talk about the different types of values

14:47 that the list parameter and the listType parameter,

14:51 which is an associated parameter, can take.

14:54 I'll link to this blog post in the video annotations,

14:56 so you can read it in more detail.

14:58 But the long and short of it is that it's

15:00 a really easy way to take a simple embedded player

15:03 on your page and use that to display a list

15:07 of videos without having to hard code the video IDs in advance.

15:11 So you could have one specific player on your page and say,

15:14 play back the most recent videos from a specific

15:17 YouTube channel or specific playlist or specific search term, even.

15:23 So you could say, this is an embedded player that will

15:26 show the latest videos that match the search from the YouTube API.

15:30 Something along those lines.

15:32 It's quite useful.

15:33 I don't think as many people know about it as they should.

15:36 So hopefully people will watch this and start using it a little bit more.

15:40 listType goes hand in hand with the list parameter.

15:43 There is a loop parameter.

15:45 And the loop parameter will— as explained in the documentation— allow you

15:52 to automatically restart playback of a video when the playback has ended.

15:57 You have to have a little bit of a hack,

15:59 if you're trying to do this for a single video,

16:01 where you create a playlist that has only one video entry in it.

16:04 So we have a little bit more info there.

16:06 modestbranding is something that's covered in a different blog post,

16:10 which we will also link to from the annotation.

16:12 And it talks about the option down here at the bottom.

16:17 It's not exactly a fully logoless player.

16:20 There still is a YouTube logo involved that shows, I think,

16:25 on the pause screen in the upper right-hand corner, or in the queued screen.

16:29 But it is one parameter that you could set

16:32 to tone down the YouTube branding on the player.

16:36 And that's something that you might want to keep in mind

16:40 if you have a scenario where you want to embed,

16:43 but don't want to make it fully YouTubed.

16:47 The origin parameter is something that can be

16:51 used when you are using the iframe embed tag,

16:54 and you're going to be interacting with the iframe embed using JavaScript.

17:00 So as mentioned before, you might want to explicitly put in enablejsapi.

17:03 You also might want to put in the origin parameter over here.

17:08 And you set it equal to the full URL for your web page.

17:12 And this is a security mechanism to make sure that only JavaScript that's

17:18 run from your host web page is able to talk to the player.

17:23 And if you're using the YT.

17:24 Player constructor, it gets set automatically for you.

17:27 So this is another instance where you really only have

17:29 to worry about this when you're explicitly writing out an iframe tag.

17:34 And sometimes people run into issues where

17:37 they explicitly were using the iframe tag,

17:39 and they're trying to talk to it using JavaScript,

17:42 but their code just isn't working.

17:45 One thing to debug in that case is check

17:47 to see whether you are setting the origin parameter.

17:49 And if you are, make sure that it's really set

17:52 to the full URL of the host name for your site.

17:57 playerapiid— this isn't really relevant anymore.

18:01 It's more of a way of using

18:03 the older JavaScript API for identifying your player.

18:06 There's a playlist parameter which is easily confused with the list parameter.

18:11 And it is something that actually takes in a different set of values.

18:14 The playlist parameter takes in a list of video IDs.

18:18 So this does not have to be a real playlist, a[?

18:20 list that?] exists on YouTube.

18:21 It doesn't have to be anything that uploads from a specific channel.

18:27 It could just be a list of any video IDs that you want.

18:30 And it's a way of generating a dynamic, on-the-fly playlist.

18:35 So some use cases where that might be useful.

18:39 There's the rel parameter.

18:41 And this controls whether or not the end screen

18:44 of a video will display related videos or not.

18:49 Most folks are familiar with the fact that once

18:50 you reach the end of a YouTube video,

18:53 you'll see some configuration of thumbnails

18:56 with suggestions for other videos to play.

18:59 We do have the ability to turn that off if

19:01 you feel like you do not want that on your embeds.

19:06 showinfo is something that will control what

19:11 is displayed initially in the queued states.

19:15 There's ways of taking the default behavior and kind of toning it down a bit,

19:18 again, where you don't see quite as much before the video starts.

19:23 And you can set it to show info equal 0, if you want that.

19:27 showinfo's actually used in another case.

19:29 And that's when you're using the list player.

19:31 And explicitly setting showinfo equal to 1 will make it so that there

19:38 is a list of queued videos in the playlist in your list player.

19:42 So if we look over here, this is a case where showinfo is set to 1.

19:47 This is a playlist player that's loading everything from Google Developers.

19:50 And you'll see, before playback has even started,

19:52 you have this handy thumbnail for all the videos

19:55 that are queued up in the playlist for the next videos.

19:58 It will let you choose what you want to start with.

20:00 So it is actually quite useful for scenarios where you're doing the list player.

20:08 Start parameter we really covered before, hand in hand with the end parameter.

20:14 And the last one is the theme parameter.

20:17 This is something similar to that earlier color

20:19 parameter that just lets you change the default

20:21 way that the player looks and gives

20:24 you some degree of customization in that regard.

20:29 There are now a couple of deprecated parameters.

20:32 I'm not going to cover those.

20:33 They're deprecated for a reason.

20:34 We don't want folks using them anymore.

20:36 I wanted to point out that there are occasionally— I don't want to say

20:42 rumors— but certain parameters out there that people pass around and say, hey,

20:46 you can use this player parameter to force HTML5 playback,

20:49 or use this player parameter to force playback

20:52 in a certain quality level or something along those lines.

20:56 Those are undocumented for a reason.

20:58 We really do not want people to use

21:01 parameters that aren't explicitly mentioned in the documentation,

21:03 partly because we're not fully committed to supporting them.

21:06 They might sometimes work in some cases,

21:09 and they might stop working at any time in the future.

21:12 So we really don't want people to build things that rely on those parameters.

21:17 And there's also just cases where we want control to be

21:21 in the hands of the person who's viewing the embed.

21:25 So we want control over the default playback to really lie

21:30 in the person who's using the web browser and might have Flash enabled.

21:35 Or the default auto quality for the quality

21:39 level in many cases gives the best playback experience.

21:44 So if you don't see something listed as a supported parameter,

21:48 please don't use it.

21:49 And if you do happen to find some parameters,

21:52 please don't complain if they ever break at some point in the future.

21:55 I guess that's the main takeaway.

21:59 That covers the list of all the supported parameters.

22:01 We had a lot of different web material here.

22:04 And be sure to check out the annotations

22:05 on the video for links to everything that we covered today.

22:09 Thanks very much for watching.

22:13 And we'll see everybody next week.

22:17 Cheers.