Information Technology Reference
In-Depth Information
6
When your blog visitor clicks the Play button on a video, the streaming all happens between
YouTube's servers and your user's machine. Your blog isn't directly involved at all.
The really cool thing is that you don't pay for any of this. Before YouTube, it was common for web
publishers to pay high fees to have video streamed—partly because of the very large amount of
data being transferred and partly because of the extra command and control code and bandwidth
required to achieve good streaming performance. If you wanted the hosts to compress your video,
that would cost even more. Google, YouTube's owner, pays for all of this for you. (And, as of this
writing, continues to lose a great deal of money on YouTube, but that's not your problem.)
Your visitor will know it's a YouTube video because it has the word
YouTube
stamped into the
image, but a bit of branding is a small price to pay. You get to share the information, entertainment,
or other benefit of the video with your blog visitor with little hassle and no expense.
You can use either HTML or a new approach called oEmbed to embed a video. With oEmbed, you
simply insert a URL, not a chunk of HTML code. However, using the HTML code gives you more
control, so it's good to know how to use both.
Here's how to use HTML to host a YouTube video (other services that provide HTML for you to
paste in are similar):
1.
If you have a post in progress that you'll be putting the video on, save it and preview it to make
sure there are no problems before you insert the HTML code for the video.
2.
Go to YouTube at www.youtube.com. If you have a video, upload it; you'll find instructions in
Chapter 9, “Adding Graphics to Your Posts.”
3.
Find a video you want to share on your blog, or go to the video you just uploaded.
4.
On the right edge of the YouTube web page with the video, find the area with the fields labeled
URL, which has the web page address of the video, and Embed, which has the code you need to
embed the video in your blog.
5.
Click the Customize button next to the Embed code. Additional embedding options appear below
the embedding code. The example shown in Figure 6.5 is from The Onion, a satirical website.
6.
Set or clear the check boxes to include related videos, show a border, and enable delayed
cookies. Click the rectangles to choose a color scheme and set a size for the video.
As you change the settings, the embedding code is changed. Try changing the size and you'll
see the change in the values assigned to the width and height attributes, which are visible
onscreen next to the prompt. (Note the XHTML-friendly quote symbols surrounding the values.)
We recommend you generally say no to related videos, yes to including a video, and yes to
delayed cookies (which only sets a cookie on your user's machine if they play a video, not just
when they see the preview image). Choose the color scheme and image size that best fit your
blog posting.
7.
Click in the code area next to the Embed prompt and copy the code.
