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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0" ></iframe>


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. 


<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?autohide=2" ></iframe>


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.

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?autohide=0" ></iframe>


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.

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?autohide=1" ></iframe>


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   .

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?theme=dark" ></iframe>  

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

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?theme=light" ></iframe>


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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?theme=light;autohide=0" ></iframe>


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:

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?theme=light;autohide=0" ></iframe>


Example video of combining two parameters :

shows exactly the same results with the code:

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?autohide=0;theme=light" ></iframe>


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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?color=white" ></iframe>


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:

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?autohide=0;theme=light;rel=0" ></iframe>

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


Wrong Code of three parameters:

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?autohide=0;theme=light;rel=0;" ></iframe>

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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/cvOM3jeAV24?autoplay=1" ></iframe>


( 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 :

<iframe width="900" height="600" src="//www.youtube.com/embed/NbwxJvdOUOM?vq=hd1080" ></iframe> 

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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?showinfo=0" ></iframe>


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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/EbuDSQrNVLY?iv_load_policy=3" ></iframe>

(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  :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?start=10;end=15" ></iframe>


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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?start=12" ></iframe>

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 :

<iframe width="360" height="203" src="//www.youtube.com/embed/akuukTVkS_0?fs=0;modestbranding=1" ></iframe>


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:

<iframe width="360" height="203" src="https://www.youtube.com/embed/akuukTVkS_0" ></iframe>


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)