Platforms like YouTube have made it as easy as pie to upload videos taken with your digital camera and then edit or cut them, add some background sound, links, texts, etc.
On numerous websites you can now see YouTube videos directly embedded using the provided HTML code you can copy and paste directly from the YouTube website.
However, there are a few things that make your website look crappy and even may lead your audience to a competitor’s website, like:
- the top search box to find other videos
- the list of related videos after yours has stopped
- the player’s style that’s always the same on different websites
- the videos don’t start automatically, your users have to click on the play button
In this post I’m going to show you some tricks in order to have your YouTube video look like coming from a professional streaming server (just the YouTube logo has to stay there, sorry 
):
1. The Code
Usually, a video code from youtube looks like this:
<object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/8yut_7gxX8A"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/8yut_7gxX8A" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object>
2. autoplay
Many people don’t like it when they always have to click on the play button to see a video. If you would like a video to start right away when viewing the page, just add autoplay=1 to the video’s address (in the code above you would add it to the second line, so the address would be
<embed src="http://www.youtube.com/v/8yut_7gxX8A&autoplay=1
3. Start video at 00:15
I don’t want my users to have to watch the whole introduction to get the video’s message, so I add &start=15 to the URL to have the YouTube video start at second 15.
<embed src="http://www.youtube.com/v/8yut_7gxX8A&start=15
4. Turn off the related movies + search box
One really big disadvantage of using YouTube as a source for videos is that at the end YouTube usually shows related to videos that might have your users switch to another site. Thanks to a special parameter, you can switch this off and the video will stop with the last frame and a “replay” button. Just add &rel=0 to the address like here:
<embed src="http://www.youtube.com/v/8yut_7gxX8A&rel=0
Have you seen the search box YouTube integrated into videos? When moving your mouse cursor over some videos, a search box appears. Just imagine you’re using YouTube videos on your company’s site and people use the videos you publish to search for your competitor’s products!
Luckily, the &rel parameter also switches off the search box!
5. Set borders around your videos
Sometimes you might want to have your videos within borders. This can be achieved using the parameters &border, &color1 and &color2:
<embed src="http://www.youtube.com/v/8yut_7gxX8A&border=1&color1=0xffffff&color2=0x000000
Make sure you’re putting the color codes as hexadecimal codes, in the format 0xffffff for white, for example.
6. Putting it all together
Last but not least, you can use all these parameters together to integrate a video in decent way, with a suitable border, having the video start at a certain second and avoid distracting users with related videos at the end – check out this interview with Darren Rowse:
Do you know any other ways to tune embedded YouTube videos?
{ 9 comments }
