I get this question a lot in workshops: "How did you get that YouTube (or any) video to play in your blog post?" It's easy. I'll tell you how in this post. But have you noticed that often the quality of a YouTube video is, well, just yucky?! I'm going to also tell you how to force YouTube to play the highest quality version of a video that it can play.
If you read my earlier post about LinkToApp, you have at least some vague idea about embedding HTML code for links into a blog post. Embedding a video is very similar. The most obvious difference is that instead of the HTML code showing your readers text that functions as a link to another place, the HTML code now will show your readers a video that must be sitting on some server someplace, in this case, sitting on YouTube's servers. It doesn't have to be a video you uploaded. It doesn't have to be a video you made. Many people share videos, including teachers. So, to include a video, like a link, we must embed some HTML code into our blog or webpage. Where do we get the code?
Three Ways to Get the HTML Code
At the end of every YouTube movie you see, the video screen changes to display two sets of HTML code: URL code, for linking to the video on the YouTube site; and embed code, for making the YouTube video itself appear on your blog or website. You don't have to watch the entire video to get to the code presented at the end. If you mouse over the up arrow (pictured below in the top video), on the bottom right of the time line, under every YouTube video, and click on the icon that appears with three small boxes in it, the two sets of code immediately appear. Both snippets of the HTML code also appear near the top right of every YouTube webpage (second picture below) for each movie on the You Tube site. Click on each image below to see the large version if needed.
[TeacherTube offers several version of embed codes: large versions, versions with and without video search fields, and versions for specific blog clients.]
What to Do with the HTML Code
If you want to link to the video on the YouTube site without showing the video in your blog or web page, you use the code labeled: URL. Below, in red, is that URL code for the video of Matt dancing with people all over the world. All I have to do is include the HTML link code, in blue, around that URL, just like we did in the post about linking to items at the iTunes Store.
<a href="http://www.youtube.com/watch?v=zlfKdbWwruY&eurl=http://drtimtyson.com/blog/&feature=player_embedded" >Click here to watch this video on YouTube's site!</a>
Remember the quotation marks, in blue, are critical. And remember that, if you forget to do this in your HTML edit mode for your blog, you will probably see exactly what I posted above instead of this: Click here to watch this video on YouTube's site! And finally, the text I italicized in the code above is completely arbitrary. You can type anything there you think will make good sense to your readers.
Now, if you want to embed the video itself in your blog or website, you use the embed code. Simply copy it and paste into the HTML editor for your blog. That's it. When you publish, the video should appear on your site. Be sure you have the legal authority to publish someone's video before you post in on your blog. Many people allow their work to be distributed by others.
When You Want the High Quality Version...
Well, first, YouTube must have one on their server. If the person who uploaded it only uploaded the low resolution, highly compressed video, that's all you will get. But by simply adding a little bit of code, if a high quality version is available, that's what you will get. It makes a noticable difference.
Simply add this code, "&ap=%2526fmt%3D18" without the quotation marks to two specific places in the embed code. Below is the low quality version of the embed code without the additional higher quality code followed by the higher quality version of the embed code to show you the two places where you must add the additional code shown above. The web address portion of the embed code, in green below, is different for each movie, so that will always vary from movie to movie. In these two examples it remains the same because it links to the same movie, just one regular quality and one higher quality. The only difference between the two is the added higher quality code shown in red.
Shown Below: The regular, highly compressed embed code YouTube typically provides
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" /></embed>
</object>
Shown Below: The high quality embed code is added in two places to the embed code YouTube typically provides
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1&ap=%2526fmt%3D18" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/zlfKdbWwruY&hl=en&fs=1&ap=%2526fmt%3D18" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" /></embed>
</object>
When you embed these into your post, I suspect you will see little of no difference in these two examples because YouTube is using this particular video, which is wildly popular, to highlight their higher quality "feature" player and no longer has the lower quality version online. If you check this link to the video on their website, you will see what a drastic improvement it is from their typical player.
I forget where I first read about this little tip, or I would credit the source. I think, but am not sure, it was over at iLounge.