Advanced YouTube Embedding Techniques

In this arti­cle I’m going to show you the best ways to embed YouTube Videos.  This is a more advanced approach, and shows you how to go about embed­ding videos the best way.

After you com­plete this arti­cle, you will know how to embed High Def­i­n­i­tion Videos, High Qual­ity Videos, Auto­play Videos, Remove Search, and Remove Related Videos.  You will also learn how to see if a video has a HQ or HD option.

Image by Björn J

About YouTube High Qual­ity Videos

If you look at the videos here on Enlight­ened Web­Mas­tery, you will notice that each video is high qual­ity, has no search box, and shows no related videos.  The rea­son for this is so that the videos are of very high qual­ity, and you can see what’s going on. For what­ever rea­son, youtube refuses to show a HQ link for my videos, so if you visit my youtube page (by click­ing one of the links) you will not be pre­sented with the option to view “High Qual­ity” on YouTube.

Even though I upload my videos in High Def­i­n­i­tion, when you visit the youtube site, all you see is the very low qual­ity feed. Enter &fmt=18, when you visit youtube, any­time you see a video (and it does not allow High Qual­ity) all you have to do is add &fmt=18 to the url to view the h.264 high qual­ity video option. As soon as you upload a video, within maybe 10–20 min­utes your HQ video will be avail­able (&fmt=18) (maybe 10–12 min­utes for the nor­mal youtube video to be ready).

To ensure you get a HQ video, you need to make sure your video is at least 480x320 (it most likely is) in res­o­lu­tion.  Any mod­ern cam­era will shoot at that qual­ity or higher.  If  your cam­era shoots at or below 320x240, you should really con­sider buy­ing a new camera…

How To Embed High Qual­ity Videos From YouTube

To embed the high qual­ity ver­sion of your videos from youtube to your web­site (like I do here) instead of the low qual­ity (and fuzzy) video you nor­mally embed on your web­site, what you need to do is: Visit -> http://www.vtubetools.com/ Type in your video code (after the v=) I.E. http://www.youtube.com/watch?v=WhYoL8FLVU0 Then select what you want to happen:

I rec­om­mend those set­tings for most users (unless you want peo­ple to see more “related videos”.  I really do not enjoy going to a web­site that has auto­play turned on, so please, don’t turn it on.  Most peo­ple will auto­mat­i­cally close their win­dow. Loop­ing is optional.  I see no point.  Maybe if you have a music video.

You really want to select High Qual­ity here, cur­rently the site does not sup­port HD but we will be cov­er­ing that below. When you are done, click pre­view, make sure every­thing is how you like, when done, click get code, and then copy that code into your blog (using the HTML set­ting), when you are fin­ished, it will look sim­i­lar to this:

About YouTube High Def­i­n­i­tion Videos

Recently YouTube start­ing show­ing HD videos, as of right now, there is no real “easy” tool to embed HD videos, but I’m going to teach you how you can go about that, with­out hav­ing to get your hands real dirty. If you want to upload your own HD videos, you need a res­o­lu­tion of 1280x720, 3000–5000 bitrate, under 1gb, and under 10:59 in length.

I can’t say what the “real” stan­dards are, only what seems to work.  YouTube has not pub­lished the offi­cial stats. Enter &fmt=22, when you visit youtube, any­time you see a video (and it does not show High Def­i­n­i­tion) all you have to do is add &fmt=22 to the url to view the HD ver­sion. (note there has to actu­ally be an HD ver­sion, unlike the HQ, it is much rarer right now to find a HD video).

How To Embed High Def­i­n­i­tion Videos From YouTube

To embed the HD ver­sion of your videos from youtube to your web­site, you’re going to need to add 2 pieces of code. Let me show you an exam­ple by pick­ing an HD video from YouTube to show as an exam­ple. In this exam­ple I’m using a Video by EA.  The URL is http://www.youtube.com/watch?v=fzvqzdWMjz0&feature=hd.

Visit http://www.vtubetools.com/ and type in the bolded por­tion into the menu (like we did before) then get the code and paste it into your text edi­tor (or the html sec­tion on your blog).

For the exam­ple, I will work along with you here:

<object width= “540” height=“340”><param name=“movie” value=“http://www.youtube.com/v/fzvqzdWMjz0&ap=%2526fmt%3D18&autoplay=1&rel=0&fs=1&color1=0x3a3a3a&color2=0x999999&border=0&loop=0″></param><param name=“allowFullScreen” value=“true”></param><embed src=“http://www.youtube.com/v/fzvqzdWMjz0&ap=%2526fmt%3D18&autoplay=1&rel=0&fs=1&color1=0x3a3a3a&color2=0x999999&border=0&loop=0″ type=“application/x-shockwave-flash” allowfullscreen=“true” width=“540” height=“340”></embed></object> 

Now we need to change the code, to give us the HD option. To do this we replace &ap=%2526fmt%3D18 with &ap=%2526fmt%3D22 then use this new code on your site.

<object width= “540” height=“340”><param name=“movie” value=“http://www.youtube.com/v/fzvqzdWMjz0&ap=%2526fmt%3D22&autoplay=1&rel=0&fs=1&color1=0x3a3a3a&color2=0x999999&border=0&loop=0″></param><param name=“allowFullScreen” value=“true”></param><embed src=“http://www.youtube.com/v/fzvqzdWMjz0&ap=%2526fmt%3D22&autoplay=1&rel=0&fs=1&color1=0x3a3a3a&color2=0x999999&border=0&loop=0″ type=“application/x-shockwave-flash” allowfullscreen=“true” width=“540” height=“340”></embed></object>

The video will now look like the following:

Con­clu­sion

I hope you have enjoyed this arti­cle, and seen how easy it is to embed HD and High qual­ity video on your site.  Most peo­ple avoid youtube like a plague because of the low qual­ity videos, and the related video func­tions.  I have now shown you how to avoid that, the only real “beef” with youtube now is the logo… =) Feel free to pass the link on to your friends, and share it with as many peo­ple as you can that host videos on their sites, this way we can all enjoy watch­ing HQ or HD videos from our browsers.

Tagged as: Blog, high definition, Video, youtube videos