YouTube embedded code guide

With this webpage I'll try to show you as simply as possible, ways to improve the look, and the quality of the video you embed. The code I’ll use is on HTML5. I believe, that flash video is obsolete since is not compatible with most mobile phones.

Let's start with the most important ones.

Every video from YouTube have a unique serial number. This is called Video ID

That Video ID is easy to be found. Nevertheless the links of youtube videos may appear in deferent ways, so let me give you some examples.

The simplest and most frequent form of YouTube link is that :

http://www.youtube.com/watch?v=akuukTVkS_0

The Youtube Video ID is the akuukTVkS_0

Another form of YouTube video is that.

http://www.youtube.com/watch?v=akuukTVkS_0&feature=youtu.be

In this case the Video ID is situated between the watch?v= and the &feature= and is again the akuukTVkS_0 .

Another one less common YouTube link of the same video file is

http://youtu.be/akuukTVkS_0

The Video ID is after http://youtu.be/ and again is the akuukTVkS_0 .

Now to the YouTube embedded code.

The simplest code to embed is that :

It works perfectly!

Example of the simplest embedded code :

Analysis of the YouTube embeded code.

The iframe is indicative that the embedded code is in HTML and the video can be played in mobile phones and tablets.

Between the brackets of width width="360" is the width size of the embedded video window in pixels and between the brackets of height height="203" is the height size of the embedded video window in pixels.

The src means source and includes between the brackets the Video ID of the YouTube video. The YouTube Video ID akuukTVkS_0 is used immediately after after the www.youtube.com/embed/ .

Instead of //www.youtube.com/embed/akuukTVkS_0 you can put the link http://www.youtube.com/embed/akuukTVkS_0 .

So the code can be <iframe width="360" height="203" src="http://www.youtube.com/embed/akuukTVkS_0" ></iframe> No difference at all.

Example of using src="http://www.youtube.com/embed/akuukTVkS_0" instead of

src="//www.youtube.com/embed/akuukTVkS_0" .

Personally I prefer the use of //www.youtube.com/embed/akuukTVkS_0 instead of src="http://www.youtube.com/embed/akuukTVkS_0" .

Time to make some changes in the video appearance.

The actual dimensions of the Youtube video I use are 320 pixels X 240 pixels.

However the dimensions in code can be smaller or bigger and not necessarily proportionally. The embedded YouTube video window can be upscaled or downscaled. There isn’t any change to the real quality of the video. It just appears bigger.

So the code can be : <iframe width="640" height="400" src="//www.youtube.com/embed/akuukTVkS_0" ></iframe> .

The video window width is 640 pixels , the video window height 400 pixels and the dimensions are not proportionally to the actual video dimension’s proportion.

Example of changing the dimensions of the video window

Since the embed video dimension are not proportional to the actual video, YouTube automatically creates a black bar above or to the side of the playing video in order to be viewed properly.

It’s time for the main YouTube embedded code parameters.

Code is a little different if you put one parameter than many.

Firstly I’ll explain the use of one.

rel

The rel is for showing or not after the end of the video play, inside the embedded video windows, relative videos. Sometimes times the relative videos the Youtube is showing, isn’t relative at all and this can be annoying. Youtube embedded code by default shows relative videos.

The rel=1 allow relative videos . The rel=0 prevents relative videos to be showed after the end of the video play.

The code for not showing relative videos is : <iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?rel=0" ></iframe>

When we decide to put a parameter we ALWAYS put only ONCE (no matter how many parameters we use) the ? immediately after Video ID of the YouTube video. In this case the akuukTVkS_0 .

Afterwards we put the parameter and its value. Most YouTube parameters have two values 0 for disable and 1 for enable.

Example of disabling the show of relative videos after the end of video play.

Since the YouTube by default shows relevant videos the use of rel=1 is not necessary at all. However you may want to change the value frequently , is more practical to put it even if it is active by default. <iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?rel=1" ></iframe> .

Example of using the rel=1 even if it is active by default.

autohide

At the bottom side of YouTube embedded video there are two things:

The video player controls.

The video progress bar.

The autohide parameter hides the video player controls or the video progress bar or both of them. It has three values 0 , 2 and 1 .

autohide=2

This is the default value and doesn’t have to be inserted.

Video player controls are always visible. However video player’s controls when are always visible tend to hide a small part of the video.

Video progress bar when the mouse is moved away from the video window is transformed to a thiner one.

Example of using autohide=2

autohide=0

With autohide=0 everything is visible no matter if you pass your mouse over the YouTube embedded video window or not.

Video player controls are always visible. Video progress bar isn’t transformed to a thinner one.

Example of using autohide=0

autohide=1

The autohide=1 hides both the video player controls and the progress bar when the mouse leaves the YouTube embedded video window. The video player controls don’t cover the lower part of the video.

Example of using autohide=1

theme

The theme changes the color of the YouTube video player controls.

It has two values.

The default value is the dark . Like the picture above theme=dark .

The other is the light . Is something like light grey theme=light .

Example of using theme=light . Start the video and move the mouse over the video window in order to see the changed video player controls.

Adding two parameters.

There is a small change to the embedded code when we put two parameters.

Lets use autohide=0 and theme=light at the same time.

The code will be :

As ALWAYS when we decide to put one parameter or more than one, we put only ONCE the ? immediately after the Video ID of the YouTube video without any space between. In this case the akuukTVkS_0.

After the end of the first parameters ( in this case theme=light ) we immediately put the ; without any space between. That helps to the separation of each parameters.

Parameters can be put in any order. The autohide=0 can be put first and the theme=light second.

The code:

Example video of combining two parameters :

shows exactly the same results with the code:

Example video of combining two parameters in a different order :

color

The color parameter change the color of the video progress

bar .

By default the video progress bar is red.

The color parameter has two values red and white .

Embedded code for white value :

Example video for using the color=white parameter : (Start the video and move the mouse over the video window in order to see the changed video progress bar)

Using three or more parameters

For many parameters after the end of the first parameter and after following parameters we put immediately and without space the ; . BUT after the last parameter we don’t put anything. BE CAREFUL NOT TO PUT THE ; AFTER THE LAST PARAMETER.

Code of three parameters:

Again there isn’t any rule for the order we put the parameters.

Wrong Code of three parameters:

The ; in red is wrong. It shouldn’t be there.

Be careful not to overdo it with the ; .

Example video of using three parameters autohide , theme and rel :

autoplay

One of the best parameters, the autoplay makes the embedded video to start automatically.

It has two values 0 and 1 . The default of course is the 0 which means that video doesn’t start automatically.

Code for enable autoplay is that :

( The Video ID of YouTube video is different. Now is cvOM3jeAV24 . From the same video, I’ve use on the previous examples I have removed the sound. I’m doing so for not disturbing the first time viewer of the webpage. That modified video was upload it and YouTube assigned to it a different serial number. )

The autoplay=1 forces the embedded video to start automatically. In case you don’t need to start automatically, just change the value from 1 to 0 .

Important: The embed video starts automatically only in desktop and portable computers. In laptops and tablet it won’t start automatically .

Example video of autoplay parameter :

( For watching its function, reload or refresh the webpage )

vq

When you upload a video file to YouTube, it is always converted into a compatible for YouTube format. This conversion isn’t lossless. Inevitable the end video has inferior quality than the original. Adding to that, YouTube most times avoids to play its videos in their best quality. Some of the reasons are, that the computer’s display won’t show the better quality and the speed of the internet connection isn’t high enough. However the main reason is that YouTube want’s to save its internet bandwidth and especially for HD videos avoids to show automatically the best video quality. You have to go to the option button and select manually the Video Quality

. The most users ignore it or they just don’t bother to do it. Don’t forget that the quality option doesn’t have to do only with the video quality but with the audio quality too. This is evident in music videos.

Well in the embedded code there is a parameter to bypass the default quality restrictions. The vq parameter means video quality and forces the embed video to be played in the desired quality.

For me is the best parameter of all. The desired quality doesn’t have to be bigger than the default. It can be lower for internet bandwidth reasons.

Attention that he vq don’t have any effect if the embedded video is played by mobile phones or tablets.

As far as I know the vq parameter has five values which respond to different video resolutions. These are:

For 240p vq=small

For 360p vq=medium

For 480p vq=large

For 720p vq=hd720

For 1080 vq=hd1080

Code for enable vq is that :

The Video ID of the video is a new one. I used ten seconds of the original video in full HD 1080p definition. The code forces the YouTube video the embed window to be played in the maximum quality, even if the size of windows is 900 x 600 pixels than the 1920 x 1080 pixels of original video.

I’ll give as many examples as possible in order to realize the deference in video quality.

Example of HD1080p video without the use of vq parameter :

The embedded video is not showed in 1080p quality.

Example of HD1080p video forced to play in low bandwidth quality 240p even if the windows is large. ( The code that will be used is <iframe width="900" height="600" src="//www.youtube.com/embed/NbwxJvdOUOM?vq=small" ></iframe> ) The parameter is the vq=small

Example video:

The quality is obviously deteriorated.

Let’s try a better quality at 480p. ( The code will be <iframe width="900" height="600" src="//www.youtube.com/embed/NbwxJvdOUOM?vq=large" ></iframe> ) The parameter is the vq=large

Example video:

Much Better !

Now its time to force High Definition at 720p.

( The code will be <iframe width="900" height="600" src="//www.youtube.com/embed/NbwxJvdOUOM?vq=hd720" ></iframe> ) The parameter is the vq=hd720

Example video:

Video quality is quite perfect. The option indicator when you start the video is automatically turned to HD.

And finally let’s force full HD 1080p , the best quality available.

( The code will be <iframe width="900" height="600" src="//www.youtube.com/embed/NbwxJvdOUOM?vq=hd1080" ></iframe> ) The parameter is the vq=hd1080

showinfo

Be default on the upper part of embedded YouTube video the title and the name of the uploader are showed. The showinfo parameter can prevent that. It has two values. The 0 for note showing title and uploader and the 1 for showing them.

The code for preventing the appearance of title and uploader is :

Example video of showinfo=0 :

iv_load_policy

YouTube shows annotation by default. In case you don’t want to be showed there is the use of iv_load_policy parameter. That parameter values are the 3 for not showing annotations and the 1 for showing annotation by default.

The code for not showing annotations is :

(The YouTube video I use in this example is a little different than the previous because it has a continuous annotations.) Annotations most times are not showed on mobile phones and tablets.

Example of video showing annotations by default :

Example of video not showing using iv_load_policy=3" :

start end

With the parameters start , end we can specify at what time the embedded video will start and end.

I’ll use the YouTube video with the Video ID akuukTVkS_0 .

The total duration of that video is 21 seconds.

I want to embedded to

start from the 10th second to the 15th second.

The code will be :

The value of start is only in seconds as the value of stop .

Example video for using start , end .

Alternatively you can make use of only the start or only the end parameter.

For only the start for the video to start at 12th second the code will be :

Example video :

fs

The fs means fullscreen . This parameter enables or disables the fullscreen icon of embedded YouTube video. It has two values the default 1

for enable fullscreen and the 0 for removing the the fullscreen icon.

The code for not showing the fullscreen icon is : <iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?fs=0" ></iframe>

Example of video for not showing fullscreen icon :

modestbranding

The fs parameter is good. However the viewer can press the YouTube logo at the down left corner and open the video in the original YouTube. This is something that can distract the visitor of your website. A smart but not perfect solution is the use of modestbranding parameter. Use the value 1 and the logo at the left down corner will disappear.

If you combine modestbranding=1 parameter with the fs=0 parameter both the fullscreen and the YouTube logo will disappear. The viewer won’t have an obvious way to view the escape from the webpage.

But don’t be so happy. YouTube after the use of modestbranding=1 parameter put a simple small YouTube word at the upper left.

That YouTube word when clicked directs the webpage visitor like the removed YouTube logo.

Still I think that the visitor is less probable to be distracted using this combination of parameters.

The code for the combination of modestbranding=1 parameter with the fs=0 parameter is :

Example video :

https

In case you are conscious about security you can make the embedded video to play under encryption.

Its very easy to do it. Just insert https: instead off http: after src=” .

Example of the code:

Example video of https : ( You can check that is encrypted by pressing the Youtube logo at the bottom right side. The video will be played in a new window and you will notice the https at the address bar)

Jun	OCT	Sep
	10
2016	2017	2018