Customize YouTube Embed Player

The post explains how to customize a YouTube embed player by using YouTube defined parameters. Nowadays most of the web developers using embed <iframe> tag for displaying videos, this improves your web project playback experience. You can stop displaying related videos using the rel parameter or removing the YouTube logo on player by using modestbranding parameter, hope this will enrich your web project experience.

 autoplay
You can automatically play video using this.
0 -> default value
1 ->automatically plays the video

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?autoplay=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

rel
Using this parameter you can stop showing the related videos, when the initial video ends.
0 and 1(default)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?rel=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

showinfo
Show video information like the tile and uploader information.
1->Before the video starts displaying,it displays information like the video title and uploader
0->will not display any info until the video is started

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?showinfo=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

 

 controls
0->Flash player loads immediately and controls are not displayed
1->Flash player and the controls display immediately(default)
2->Controls are displayed and flash player loads once the user initiates the video.

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?controls=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

modestbranding
1->prevents the YouTube logo on the player in the control bar
0->(default)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?modestbranding=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

color
red(default) & white---can change the color of the progress bar either to red or white
Note: Setting the color parameter to white will disable the modestbranding option.

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?color=white" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

cc_load_policy
1->the turned off captions are shown by default
0->default value depends on user preference

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?cc_load_policy=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

disablekb
1-> allows the player to respond on keyboard controls
0->player will not respond to keyboard controls(default)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?disablekb=1" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

iv_load_policy
1->video annotations are shown by default(default)
3->video annotations are restricted

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?iv_load_policy=3" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

 

 

 end
Specify the time in seconds, when to stop playing the video from the start of the video(always from the start of the video)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?end=10" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

fs - full screen
0->will not show the fullscreen button on the player
1->will show the fullscreen button(default)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?fs=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

loop
1->causes a video to play repeatedly
0 (default)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?fs=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

 start
Specify the time in seconds, when to start playing the video from the start of the video(always from the start of the video)

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?start=10" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

Recommended Parameters
You can use multiple parameters in following way.

<iframe src="https://www.youtube.com/embed/HIsKF943vTk?rel=1&modestbranding=1&showinfo=0" frameborder="0" allowfullscreen width="570" height="315" ></iframe>

 

 

Credit to 9lessons