YouTube Embed Codes Tricks, Tweaks and Tips

You might already know how to embed a video on your blog or website from YouTube. YouTube provides the embed code with only a few options, but you can legally customize the look and feel of your embedded video by altering the embed code and adding a few more parameters to the code that YouTube provides.

First of all, YouTube provides two type of embed codes, one is flash based and the other one, which is newer, is HTML5 based iframe codes. YouTube supports seamless support on old codes, so if you have videos embedded using the old code, you do not need to change them, they will keep working. Here I am going to use the new iframe code to customize the embedded video.

A standard iframe code for embedding YouTube videos looks like this:

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0" frameborder="0" allowfullscreen></iframe>

Auto Hide the Controls and Duration Bar
You can choose to hide the player controls and duration bar automatically when a video starts by adding the autohide=1 parameter at the end of the src tag. The value 1 hides the controls on the video, but shows up if the viewer hover the mouse cursor over the video. With the value 0, the video progress bar and the video player controls will be visible throughout the video.

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1" frameborder="0" allowfullscreen></iframe>

Auto Play the video on pageload
You can choose the start playing of the video automatically on a page load by adding the autoplay=1 parameter at the end of the src tag. For example;

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1" frameborder="0" allowfullscreen></iframe>

Add a Border to the video
You can choose to put a border around the video by adding the border=1 parameter at the end of the src tag. The border’s primary color can be set via the color1 parameter, and a secondary color can be set by the color2 parameter. The value of the color1 and color2 should be any RGB color in hexadecimal format. The example is;

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1&border=1&color1=#096100" frameborder="0" allowfullscreen></iframe>

Hide the Video Controls
You can choose to hide the video controls (annotations, captions, quality and player mode etc) from the controls bar. By default they are shown, but you can choose not to by adding the controls=0 parameter at the end of the src. Here is the example;

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1&border=1&color1=#096100&controls=0" frameborder="0" allowfullscreen></iframe>

youtube logo

Allow Full Screen View
The full screen view button is enabled by default, but you can choose to disable it by adding the fs=0 at the end of the src tag. Remember, this will not work if you forget to remove the allowfullscreen tag from the iframe code. Here is the example;

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1&border=1&color1=#096100&controls=0&fs=0" frameborder="0"></iframe>

Show HD version by default
YouTube shows the minimum available resolution of the video by default. But, you can choose to embed the HD version of the video by adding the hd=1 parameter at the end of the src tag. This parameter will be ignored if there are no available HD versions of the video.

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1&border=1&color1=#096100&controls=0&hd=1" frameborder="0" allowfullscreen></iframe>

Remove the YouTube Branding
YouTube shows a small YouTube logo at the player control bar and clicking on that leads the visitor to the YouTube page of the video. You can choose to remove the logo by adding the modestbranding=1 parameter. However, there will be a small YouTube text in the upper right corner of a paused video when the visitor hovers the mouse over the video.

<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1&border=1&color1=#096100&controls=0&hd=1&modestbranding=1" frameborder="0" allowfullscreen></iframe>

Here is a sample video with some of the tweaks mentioned above:

Get Updates In Your Inbox

Get the WordPress Tips and latst Internet Marketing ideas delivered directly to your email inbox, plus access to our FREE Pro Blogging Model blogging guide.

You need to confirm your email once. Don't worry, we hate SPAMs as much as you do

Comments

  1. Joe says

    Hi there, can you pl help me get the embed code parameter, so that at the end of the video ‘title, share and more info’ should not be shown. Video should end with virtually nothing on the page for people to use any link. I am using showsearch=0,showinfo=0,rel=0,autohide=1. Thanks

  2. pete says

    Thanks for the tips. I am trying to add the full screen button on my embedded video but when I take the code form YouTube it doesn’t seem to work. How would I get this working? Currently my code is: 

Speak Your Mind

Your email address will not be published. Required fields are marked *

You may use these HTML Tags and Attributes

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>