Embedding YouTube videos into a webpage
Adding a YouTube video to a website by embedding it to a webpage is one of the most common tasks and it’s done quite easily. Here is what you need to know.
Suppose, you have uploaded your own video to YouTube or found the one you want to embed into your website so it plays on your web page without going to the YouTube page.
Take a note of the video URL while watching it on YouTube. For example, URL of the video that you watch on the YouTube and want to embed is this:
https://www.youtube.com/watch?v=ers_S5zR5iM
The highlighted portion of that URL is called YouTube Video ID. That is the single piece of information that uniquely identifies the video.
In order to embed that particular video into your website you would need to insert (copy & paste) the following HTML code snippet into your website HTML:
<iframe width="400" height="300"
src="https://www.youtube.com/embed/ers_S5zR5iM"></iframe>
Placing the above code in the HTML of this blog will produce the following video player:
Note, that you can control your visual player size by adjusting width="XXX" and height="YYY". In addition, you can add as many YouTube videos to your web page as you want. You can either add them to the same video player by providing a play list (in this case, videos can be viewed sequentially) or you can add multiple video players to your web page – each associated with a single or multiple videos. In the latter case, your website visitors can select video player and jump right to its initial video.
Customize your YouTube video player
YouTube allows you to customize your embedded video player and its behavior in many ways. There are numerous parameters that you may add to the end of the quoted string in src= that control behavior of the embedded YouTube video.
If you need to add just a single parameter you would add a "?" to the end of that string, then the parameter name, "=", and the parameter value. For example:
src="https://www.youtube.com/embed/ers_S5zR5iM?rel=0"
If you need to add two or more parameters, then at the end of the quoted string you add "&", then the next parameter name, "=", and then the next parameter value. For example:
src="https://www.youtube.com/embed/ers_S5zR5iM?rel=0&autoplay=1&color=white"
Generalized formula is this:
src="https://www.youtube.com/embed/VIDEO_ID?PAR1=VAL1&PAR2=VAL2&PAR3=VAL3"
Why would you want to add YouTube parameters?
The answer is simple: you will need to add YouTube parameters in order to control behavior of the embedded video player. With the YouTube video player parameters you can control whether your video starts playing by itself or needs to be initiated by your website visitor; you may control whether to show related videos after the initial video ends or not to show. You may also control whether to show the video in its entirety or show just a fragment of it by specifying its start and end points. You may control many other functionality and behavior of your embedded YouTube video player.
What if you don’t add YouTube parameters?
Adding YouTube parameters is optional and only needed when you want to change the default behavior of the YouTube video player embedded into your website. All YouTube parameters have default values and the video player uses those default values when parameters and their values are not provided. In other words, if a default value is what you want you may supply that parameter and value or may skip it - the result will be the same.
YouTube parameters and their values
In the table below you will find the most common YouTube embedded video players’ parameter names, their descriptions and default values for HTML5:
| Parameter Name | Parameter Description | Valid Values | Default Value |
|---|---|---|---|
| autoplay | This parameter specifies whether embedded video will automatically start to play (autoplay=1) when the player loads | 0, 1 | 0 |
| color | This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen | red, white | red |
| disablekb | The name of this parameter seems misleading to me. It enables (1) or disables (0) keyboard controls | 0, 1 | 0 |
| end | This parameter specifies the time, measured in seconds from the start of the video, when the player should stop playing the video. Usually used in conjunction with start parameter | Positive integer | No default value |
| fs | Allows (1) or prevents (0) the fullscreen button from displaying in the player | 0, 1 | 1 |
| loop | Causes the video player to play video repeatedly (1) once started, or stop at the end (0) | 0, 1 | 0 |
| playlist | This parameter specifies a comma-separated list of video IDs to play. If you specify a value, the first video that plays will be the VIDEO_ID specified in the URL path, and the videos specified in the playlist parameter will play thereafter | Valid video ID list | No default value |
| rel | This parameter indicates whether the player should show (1) or not to show related videos (0) when playback of the initial video ends | 0, 1 | 1 |
| showinfo | Setting the parameter's value to 0 causes the video player to not display information like the video title and uploader before the video starts playing | 0, 1 | 1 |
| start | This parameter causes the video player to begin playing the video at the given number of seconds from the start of the video. Usually used in conjunction with end parameter | Positive integer | No default value |
Calculating number of seconds for video start and end
If you know start and end time as HH:MM:SS (hours, minutes and seconds), you can easily convert that into the number of seconds using the following formula:
Number of seconds = SS + 60*MM + 3600*HH .
For a complete documentation on the YouTube player parameters, you may refer to YouTube Embedded Players and Player Parameters on the Google Developers web page.
Blog Home