Embedding YouTube Videos on Your Web Page or Blog
Did you know that you can display any YouTube video on your own web page or blog? It’s actually quite easy, as you’ll learn from YouTube 4 You author Michael Miller.
One of the things that make YouTube a great video sharing community is that any user can display any YouTube video on his own web page or blog. You don’t even have to host the video; just embed a pointer to the video in your page’s HTML, and YouTube automatically feeds the video to anyone visiting your page.
How do you do this? It’s as easy as cutting and pasting a line or two of HTML. Read on to learn more.
Linking to a YouTube Video
Before we get to embedded videos, let’s look at an even easier way. You can reference a YouTube video from your web page or blog—by linking to it. Every YouTube video has its own unique URL; you can copy and paste this URL into email messages, blog postings, or your own web page.
You can find a video’s link URL by opening the video viewing page on YouTube and then clicking the More Info link in the description box underneath the video. The URL, not surprisingly, is the bit of code in the URL box.
To insert a YouTube video link into an email message or blog post, simply copy the URL from the video page and paste it into the body of your message or post. Anyone reading your message or post can click the link and be taken to the video viewing page on the YouTube site.
To insert the link into a web page, copy it from the video page and then insert it into your page’s underlying HTML code, surrounded by the appropriate link tag. The resulting code should look something like this:
Click <a href="http//:http://www.youtube.com/watch?v=12345“>here</a> to view my YouTube video.
Naturally, you’ll want to replace the href link with the URL from the video you’re linking to. When visitors click the link in the text, they’re taken to that video’s YouTube page.
Embedding a Video on Your Web Page
Linking to YouTube videos from your web page is one thing; embedding an actual video into your web page is quite another. That’s right—YouTube lets you insert any of its public videos into your own web page, complete with video player window. And it’s easy to do.
That’s because YouTube automatically creates the embed code for every public video on its site (as well as your own private videos), and lists this code on the video page itself. The code is in the description box below the video, in the Embed box. You’ll need to copy this entire code (it’s longer than the Embed box itself) and then paste it into the HTML code on your website, wherever you want the video player window to display.
The result of inserting this code into your page’s HTML is that your web page now displays a special click-to-play YouTube video player window. The video itself remains stored on and served from YouTube’s servers; only the code resides on your website. When a site visitor clicks the video, it’s served from YouTube’s servers to your viewer’s web browser, just as if it were served from your own server. (This means you don’t waste any of your own storage space or bandwidth on the video.)
By the way, the code in the Embed box is squished together onto a single line, to make it easier to copy. If you were to properly format the code, it would look something like this:
<object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/12345“></param> <param name=”wmode” value=”transparent”></param> <embed src=”http://www.youtube.com/v/12345” type=”application/x-shockwave-flash” wmode=”transparent” width=”425″ height=”350″> </embed>
Options for Embedded Videos
There are a few options you can choose when embedding a video. These options affect how the video plays.
The first option is to have YouTube display related videos after the embedded video is done playing. You access this option on the YouTube video page itself. Click the Customize This Embed link next to the Embed box, and you see the choices: Include Related Videos or Don’t Include Related Videos. Whichever you choose, the embed code changes to reflect your choice. (By default, YouTube displays the related videos; use this option if you don’t want to display any other videos.)
The second option is for whether the video starts to play automatically when your web page loads. By default, it doesn’t; visitors have to click the Play button to view the video. If you want the video to play automatically, you have to insert the following code directly after both instances of the video’s URL in the embed code:
&autoplay=1Note that there should be no space before or after this added code.
</object>
CAUTION
Don’t copy this code to your web page—it’s just an example!
Posting a Video to Your Blog
If you have your own personal blog, YouTube makes it easy to send any public YouTube video to your blog as a blog posting. YouTube supports automatic posting to the following blog hosts: Blogger, Friendster, LiveJournal, Piczo, WordPress.com, and WordPress self-hosted blogs.
You start by telling YouTube about your blog, so it knows where to send the post. Click the My Account link at the top of any YouTube page; when the My Account page appears, scroll down to the Account Settings section and click the Video Posting Settings link. When the next page appears, click the Add a Blog/Site button.
YouTube will now display the Add a Blog/Site page. Pull down the Blog Service list and select your blog host, enter your blog username and password, and then click the Add Blog button.
Once configured, it’s a snap to send any public YouTube video to your blog. Just open the video page and click the Share link. When the Share Video panel opens, pull down the Choose a Blog list and select your blog. Enter a title for this post, and then enter any text you want to accompany the video. Click the Post to Blog button, and YouTube will post the video (and accompanying text) to your blog as a new post.
It’s that easy!