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:
[sourcecode language="html"]<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0" frameborder="0" allowfullscreen></iframe>[/sourcecode]
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.
[sourcecode language="html"]<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1" frameborder="0" allowfullscreen></iframe>[/sourcecode]
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;
[sourcecode language="html"]<iframe width="1280" height="720" src="http://www.youtube.com/embed/9T3VJwZRZOE?rel=0&autohide=1&autoplay=1" frameborder="0" allowfullscreen></iframe>[/sourcecode]
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;
[sourcecode language="html"]<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>[/sourcecode]
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;
[sourcecode language="html"]<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>[/sourcecode]
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;
[sourcecode language="html"]<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>[/sourcecode]
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.
[sourcecode language="html"]<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>[/sourcecode]
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.
[sourcecode language="html"]<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>[/sourcecode]
Here is a sample video with some of the tweaks mentioned above:
Article by Abhik
Hi, I am Abhik and this is my blog ItsAbhikDotCom. I am a Blogger and Online Marketer by profession. I love to talk about WordPress, SEO, SEM, Blogging, Online Marketing and different ways to Make Money Online.
So far Abhik has written 599 awesome articles at ItsAbhikDotCom
Twitter: @itsabhik | Facebook | Google+ | Blog → ItsAbhikDotCom
I am Abhik from Kolkata, India.
{ 4 comments… read them below or add one }
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
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:
Great tips! I’ll use those on my next video sales letters for sure.
Thanks!
Etienne
Thanks Abhik for the tricks. Will come handy.