How To Make Custom YouTube & HD Embed Players

If you post videos on YouTube and embed them on your site you may want to customise the player a little.

While the YouTube default embed code can not be fully customised you can make some small changes to remove the title bar, control bar and show HD videos.

Below are the examples of each player I use.

When you choose the embed code from YouTube there’s only one part of it which needs to be change and that’s the part after the video embed characters and trailing question mark.

This is the default YouTube iframe code and the part we edit/amend is in bold rel=0

To link each of the parameters together within the YouTube iframe code you use the & character.

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

Here are the YouTube parameters I use
?controls=1&rel=0&showinfo=0&modestbranding=0&vq=hd720

Below is each video with a different parameter and you can choose which you use.

Default player

?rel=0
This turns off suggested videos

No controls

?controls=0
0 turns OFF controsl – 1 turns ON controls

No ‘Info’ Video Title Bar

?showinfo=0
0 turns OFF title – 1 turns ON title

Force HD Video

?vq=hd720
Your video must be uploaded as HD size for his to work.

Branding

?modestbranding=1
Display YouTube logo in control bar – 0 turns OFF logo – 1 turns ON logo

Theme Light

?theme=light

What do I use?

I like my players to be minimal but with controls so the user can view them in full screen if they want. If I didn’t need full screen then I would turn off the bottom control bar and the user can still play and pause by clicking the video.

Here’s my player code with the light theme ¬†and no controls.

<iframe src="//www.youtube.com/embed/Z6MbsJOAWSk?controls=0&amp;rel=0&amp;showinfo=0&amp;modestbranding=1&amp;vq=hd720&amp;theme=light" height="315" width="560" frameborder="0"></iframe>

If you want to build custom YouTube Players or learn more about how you can develop with YouTube visit Google Developers.

So which player do you like?

Comments

  1. David, why would you turn off controls?

    • Hi James, turning off controls allows a little control over how the user act with the video. For example you could force them to watch the video all the way through (not possible with YT) also it removes any distractions on the video allowing for a better user experience.

Leave a Reply