Hello and welcome to YouTube Behind the Scenes.
My name is Mat’as Molinas
and I am a Google Developer Expert for YouTube APIs.
In this lesson we will see how to use
the YouTube iFrame Embedded Player
on your pages and your web applications.
We will also see how you can personalize it
through parameters.
We will also analyze real cases
where the Player is configured the same way.
And we will see how to implement one of these cases.
Are you ready? Let's get started.
INTRODUCTION TO IFRAME EMBEDDED PLAYER
There are different options
for the Embedded Player.
There's the Flash AS3, AS2 Embedded Player
and also the Embedded Player in an iFrame.
The iFrame is the most recommended option
because this way YouTube can decide
which Player will be downloaded
in the iFrame to play videos.
It's worth remembering that there are devices
that can not support Flash, such as iPad and iPhone.
There are two ways to create an iFrame Embedded Player,
one is through JavaScript,
and the other by directly declaring the iFrame.
In this lesson, to make it easier,
we will directly declare an iFrame to use URL parameters
that modify its appearance and behavior.
The simplest way for obtaining code
to embed the iFrame Player
is by using the code shown in the Share option
when we watch a YouTube video.
The Embedded Player
has a series, of standard controls.
such as the Play Button, Pause Button,
Volume Control, Progress BarÉ
We can personalize these through parameters
as well as Player behavior.
We do this through URL parameters.
We also specify through the URL the video we want to watch.
We can use, for example, the Autoplay parameter,
and this way the video will begin automatically
with no user intervention.
Other than for personalizing the Player by parameters,
the API allows us to monitor its activities
and control it through JavaScript.
But we'll see this in the next lesson.
Now let's see how to easily include
an iFrame instead of a Player on a web page.
}STEP 1 -OBTAIN CODE FROM AN IFRAME EMBED PLAYER
Select a video to play on YouTube.
In the options below the video
select Share and Embed.
Select the size you want the video to be
on your web page.
Copy the code shown.
This code allows you to include the video on your page
through an iFrame Embedded Player.
}STEP 2 TRY IT ONLINE
Try the code on this web page.
THE PARAMETERS AND THEIR OPTIONS
Let's see how to personalize the appearance and the behavior
of the YouTube Embedded Player
through URL parameters.
After this section, you will be able to personalize
the YouTube Player you use on your web pages
and your web applications with no trouble.
Always remember that your Player
should have a size of at least 200x200 pixels.
Other than personalizing the appearance and behavior
of the Player through parameters,
you can do it through JavaScript.
In this case, you should include one more URL parameter.
Personalization through JavaScript
is what we will see in the next lesson.
These are the parameters we can use:
Before analyzing the parameters in detail,
we should see the URL format
that allows us to embed a video
and specify what video we want to see.
Let's see some of these parameters in detail.
AUTOHIDE
Let's look at AutoHide.
This parameter indicates if the Player hides the Controls
after the video begins to play.
It can have the following values:
The first is 2, which is by default.
In this case the Progress Bar
is visible during play.
Play and Volume Controls
are also visible.
The second is 1. If we give it a 1 value,
the Progress Bar and the Controls
slide away a few seconds
after the video starts to play,
but they become visible again if the user scrolls the mouse
over the Player or presses a key.
If the value is set on 0,
the Controls will be visible while the video plays,
even if it's on Full Screen.
AUTOPLAY
Let's look at AutoPlay.
This parameter specifies
if the video starts to play automatically
when the Player finishes downloading on the page,
or if the user needs to click on Play to start it.
It can have the following values:
The first is 0, which is by default.
In this case the user must click on Play to start the video.
The second is 1, and in this case,
the video begins to play automatically
when the Player finishes downloading on the web page.
CC_LOAD_POLICY
Now let's look at the cc_load_policy parameter.
This parameter, with the value set on 1,
makes subtitles appear
even if the user did not select any subtitles.
This parameter only works with Flash Player.
So, if the iFrame Player, instead of the Flash Player,
downloaded the HTML5 Player,
because it's the only one the device supports,
this parameter will have no effect.
COLOR
This parameter establishes the color of the Progress Bar
that shows what the user has already seen.
This parameter can have two values:
Red, which is the default value, or White.
This parameter is ignored if we use a parameter
that we will see further along, which is ModestBranding.
CONTROLS
This parameter specifies
if Play Controls will be shown.
When Flash Player is used,
it also specifies if the Player
will download immediately.
If the value is 0,
the Controls will not appear
and Flash Player will download immediately.
If the value is 1,
Player Controls will appear,
and if it's a Flash Player,
immediately start downloading.
If the value is 2,
Player Controls will also appear,
but if it's a Flash Player,
it will download when it starts to play.
LOOP
Now let's look at the Loop parameter.
The Loop parameter determines if a video,
or a playlist,
plays indefinitely.
The default value is 0,
and with this option, the video or playlist,
will not play indefinitely.
If the value is 1,
it plays indefinitely if it's a video,
and if it's a playlist,
we will see the first to the last video,
and then it will repeat indefinitely from the first.
MODESTBRANDING
Parameter ModestBranding.
This parameter establishes if we will see the YouTube logo
on the Control Bar.
If this parameter has a value of 1,
we will not see the logo, but we will see text
in the upper right-hand corner that says "YouTube"
when we scroll the mouse over the Player
or when we stop the video.
The default value is 0,
and it indicates that we will see the YouTube logo
on the Control Bar.
PLAYLIST
Parameter Playlist.
This parameter is used
to allow the player to show a list of videos.
We will specify the video IDs separated by commas,
and the video specified on the video ID
will be the first video to be played.
REL
Parameter Rel.
This parameter establishes if, when a video is done playing,
recommendations will be presented
for related videos, or not.
The value can be 0. If this value is assigned,
recommendations will not show at the end of the video.
If the value is 1,
which is the default value,
recommendations for related videos
will show at the end of the video.
SHOWINFO
Parameter ShowInfo.
This parameter indicates if video information will show,
such as the Title or Uploading Account,
before playing.
Value 0 for this parameter
makes the information invisible.
The value by default is 1, and the Information,
Video Title, and Uploading Account can be seen.
START
Parameter Start.
This parameter can have a positive value,
which will be the number of seconds
from when the video starts to play.
If this point does not match up with a frame,
it will search for a prior one in order to start playing.
THEME
Parameter Theme.
This parameter determines which Theme,
or combination of colors,
we will use for the Player Control Bar.
The possible values are Dark,
which color combination we will use on the Control Bar,
or Light, which is another combination of colors
we can use for the Control Bar.
ANALYSIS OF REAL CASES
HOW TO IMPLEMENT A REAL CASE FROM ZERO
Now let's see how we can use the parameters
in real cases.
BELEZA
Let's look at the real case of Beleza.
At the end of the video we can see
the use of the Rel parameter,
because instead of showing YouTube recommendations,
recommendations are shown almost at the end of the video
as annotations.
AHHH
Now let's look at the Ahhh case.
In this case we can also inspect the code
and see what parameters are being used for the URL.
What is the effect of using this combination of parameters?
Was Player appearance and behavior as expected?
TU BRINDIS
Let's look at one more case, the Tu Brindis case.
As in the other examples,
we can also inspect the code
and see the parameters in the URL.
Let's see the effect in the real case.
I hope you enjoyed this lesson.
We learned how to use URL parameters
to personalize not only the visual appearance,
but also the behavior of the YouTube Player,
achieving a customized experience.
We used the iFrame Player parameters,
which is the option that guarantees
your video can be seen on most devices.
We also did it using an iFrame tag,
which is the easiest way,
and, in many cases, is more than enough.
We saw how to use the parameters in real cases;
in successful cases.
I invite you to watch the next lesson,
where we will see how to use the iFrame API,
and the Flash API, and how to control the Player,
but from JavaScript.
In the next lesson we will also see all this
by looking at successful real cases.
See you at the next lesson!