How to Customize embeded Youtube Videos

It's time for a new topic and the topic is YouTube. This is my first post on this topic. Recently, I am working on a Youtube website project and find a good ways to customize embedded videos.

Lets talk about Youtube embedded videos, Embedded Videos is a facility provided by Youtube, so that you can show Youtube videos on your website. There is no need to host video files on your server, you need only to paste embedded code.

You can easily embed Youtube videos to your website by pasting code given on Youtube share section. a code example is given below,

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk" frameborder="0" allowfullscreen></iframe>

Now, its time for Customizing Embedded YouTube Vidoes, see, How ?
Here, I am showing only most important parameters but the total number of parameter is more than 20.

1. Autoplay

As the name suggest, Autoplay parameter is used to change whether video starts with webpage load or not. It's very simple to add autoplay parameter. The default value is 0 that disable autoplay feature and 1 enable this feature.

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk?autoplay=1" frameborder="0" allowfullscreen></iframe>

2. Annotations

Annotations are used to add hyperlinks inside videos, i feel it most irritating part while watching a video, annotations are enabled by default, you can disable it using following code,

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk?iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

3. Loop

This parameter is used for adding repeat feature to Youtube embedded video, loop has two possible values 0 or 1. default value for this parameter is 0, and 1 is used for enabling this feature. Code given below for enabling this feature,

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk?loop=1" frameborder="0" allowfullscreen></iframe>

4. Modest Branding

Modest branding is used for removing Youtube logo from control bar, but small text logo still shown on top bar. You can enable this parameter by changing its value to 1. Code is given below to enable this feature,

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk?modestbranding=1" frameborder="0" allowfullscreen></iframe>

5. Related Videos

This parameter is used to show/hide related videos after ending of current video. It is by default enabled, but you can disable it by adding rel with value 1. Disable it using following code,

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk?rel=1" frameborder="0" allowfullscreen></iframe>

Most of you thinking that 'How to use all parameters in a single embedded code ?'
In the below code, i used all parameter in a single embedded code, it is very helpful for adding multiple customization in a single embedded code,

<iframe width="560" height="315" src="//www.youtube.com/embed/-HITy0xqAhk?modestbranding=1&loop=1&iv_load_policy=3&autoplay=1" frameborder="0" allowfullscreen></iframe>

In above code, i used two special character ? and &, they are used to notify that after '?' is paramter and '&' is used as parameter separator.
All codes given above are examples and you need only to add blue color code after embeded url.

Final Words

Customization is always a good way to make things work better, its your decision that, How you implement ?