How To Customize YouTube Player Embeds - Tips and Tricks

Last month, I spoke on several panels at the PubCon conference about online video.  In one session, titled, "Best Practices for Video Creation, Integration & Marketing," I focused my presentation on how to best integrate online video in a website.  There was a lot of information covered in my presentation, but one of the slides that I noticed people furiously jotting notes about, was my slide with tips for customizing the embed code for YouTube Videos.

Now, I won't spend time in this post debating whether you should or should not use YouTube to host videos for your website.  Clearly there are some advantages as well as disadvantages for posting video vs. hosting video.  If you ask me, I always recommend distributing your videos to YouTube as they have a tremendous audience to draw upon.  However, I much prefer using an online video platform or self-hosting my own videos.

All that being said, if you are going to use YouTube to host videos for your site, at the least, you should know some ways in which you can customize YouTube's embedded player to your liking.

How to Customize YouTube Embeddable Player Features

• Turn off Title & Ratings
  • &showinfo=0
• Turn off Search
  • &showsearch=0
• Turn on Related Videos
  • &rel=1
• Turn off Annotations
  • &iv_load_policy=3
• Force Closed Captions
  • &cc_load_policy=1
• Turn on AutoPlay (not recommended)
  • &autoplay=1
• Loop Playback
  • &loop=1
• Remove Full Screen Option (not sure why you'd want to)
  • &fs=0

What if you need a custom size for your player?

Well, this seems like an obvious one, and it is.  Keep in mind that YouTube's player is in 16x9 wide-screen format.  If you want to change the dimensions, do so using a 16:9 aspect ratio and add 25px in height for the player controls.  For example, lets say that you needed the video to be 320px wide:

--> 320(9)=Height(16) and then add 25px

--> Height=180 + 25 = 205px

How to Customize YouTube Video Quality

Youtube already allows you to customize the embed code and allows the videos to play in HD, but in case you were wondering what the codes were for this and/or how to force play back of high-quality files (not HD);

• Show in High-Definition 720p
  • &hd=1
• Show in High-Quality
  • &ap=%2526fmt%3D18

Here is an example embed code using the high-quality "hack"

<object width= "425" height="344"><param name="movie" value="http://www.youtube.com/v/MDedb1Kgjys&ap=%2526fmt%3D18" /><param name="allowFullScreen" value="true" /><embed src="http://www.youtube.com/v/MDedb1Kgjys&ap=%2526fmt%3D18" type="application/x-shockwave-flash" allowfullscreen="false" width="425" height="344"></embed></object>

Example of Customized YouTube Player

So here is an example video at 600px wide, in HD, with no title, no ratings, no search, no full-screen option, forced closed captions and looped play-back.

How to Embed YouTube Videos with your Own Player

Want to have a completely custom player of your own to stream YouTube videos?  You can do that as well using YouTube's chromeless player API.  One of my favorite video players out there is the JW Player from LongtailVideo.  You can use the JW Flash Player to showcase YouTube videos and still maintain your custom JW skins, functionality, etc....

Wow - ok, that was a long post but I hope that it helps. If it does, perhaps you can help by bookmarking, sharing, digging, stumbling, etc... Other people could probably benefit from this info and I certainly wouldnt mind the traffic ;-)