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>
very cool! Ready to add these right away. Tnx Siri the great!
ReplyDeleteits nice :) have a nice day
ReplyDeletegreat
ReplyDeletehow to disable related videos.?
ReplyDeleteUser this parameter rel=0
Deletehttps://www.youtube.com/embed/HIsKF943vTk?rel=0
Thanks a lot for clarifying all these... Very useful!
ReplyDeletePlease update the "Youtube instant search" with the new API, it is not working anymore :(
ReplyDeletehttp://www.9lessons.info/2010/09/youtube-instant-search-with-jquery-and.html
Please Siri !!
Sure.
Deletethanka, great tutorial
ReplyDeleteHi Srinivas, I think there need a small correction near loop - repeated play (&loop=1&autoplay=1). Thanks for such a nice post. :)
ReplyDeletethanks for the great tutorial
ReplyDeleteits usefull, grat job
ReplyDeleterel=0 is not working in my site what's the problem ?
ReplyDeleteSeem, Loop function is not working
ReplyDeleteyeah, this is really great. thanks for sharing
ReplyDeleteHey! Nice to see all the customized options at one place.
ReplyDeleteAwesome share, I like it so much. thanks for it.
ReplyDeleteGreat information
ReplyDeletewhat if i want to use autoplay and modestbranding together like
ReplyDeletesrc="https://www.youtube.com/embed/HIsKF943vTk?autoplay=1?modestbranding=1"
is this Right ?
This comment has been removed by a blog administrator.
ReplyDelete