Customize YouTube Embed Player
Wall Script
Follow Me:
Monday, November 23, 2015

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>


Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


19 comments:

  1. very cool! Ready to add these right away. Tnx Siri the great!

    ReplyDelete
  2. how to disable related videos.?

    ReplyDelete
    Replies
    1. User this parameter rel=0

      https://www.youtube.com/embed/HIsKF943vTk?rel=0

      Delete
  3. Thanks a lot for clarifying all these... Very useful!

    ReplyDelete
  4. Please update the "Youtube instant search" with the new API, it is not working anymore :(

    http://www.9lessons.info/2010/09/youtube-instant-search-with-jquery-and.html

    Please Siri !!

    ReplyDelete
  5. Hi Srinivas, I think there need a small correction near loop - repeated play (&loop=1&autoplay=1). Thanks for such a nice post. :)

    ReplyDelete
  6. rel=0 is not working in my site what's the problem ?

    ReplyDelete
  7. yeah, this is really great. thanks for sharing

    ReplyDelete
  8. Hey! Nice to see all the customized options at one place.

    ReplyDelete
  9. Awesome share, I like it so much. thanks for it.

    ReplyDelete
  10. what if i want to use autoplay and modestbranding together like

    src="https://www.youtube.com/embed/HIsKF943vTk?autoplay=1?modestbranding=1"

    is this Right ?

    ReplyDelete

Make in India