13. Adding YouTube Videos to Your Own Site or Blog
One of the great things about YouTube is how easy it is to share YouTube videos. You've already learned how to share videos via email links; now it's time to learn how to share videos via your own web page or blog.
Adding YouTube Video Links to a Web Page
The easiest way to reference a YouTube video is via a link to that video page on the YouTube site. Every YouTube video has its own unique URL; you can copy and paste this URL into email messages, newsgroup postings, or your own web page.
Linking to an Individual Video
You can find a video's link URL in the information box at the top right of the video page, as shown in Figure 13.1. It's the bit in the URL box, just below the video's tags.
Figure 13.1. The URL and embed links for a typical YouTube video.
To insert a YouTube video link into an email message, simply copy the URL from the video page and paste it into the body of your email message.
To insert the link into a web page, copy it from the video page and insert it into your page's underlying HTML code, surrounding by the appropriate link tag. The resulting code should look something like this:
Click <a href="http//:www.youtube.com/watch?v=12345">
here</a> to view my YouTube video.
Naturally, replace the href link with the URL from the video you're linking to. The resulting text and link should look like that shown in Figure 13.2. When visitors click the link in the text, they're taken to that video's YouTube page.
Figure 13.2. A link to a YouTube video inserted into a typical web page.
Linking to Your Profile Page—Or List of Videos
YouTube also lets you link to your YouTube profile page. Just use this URL within your link code:
http://www.youtube.com/user/username
Alternatively, you can link to a list of your uploaded videos, using this URL:
http://www.youtube.com/videos/username
In both instances, replace username with your YouTube username.
You can also link to any playlist you've created. Just go to your My Playlists page, select the playlist, and copy the URL in the URL box. (To embed all the videos in a playlist, copy the Embed link instead.)
Embedding YouTube Videos in a 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 information box at the top right of the video page, just below the URL code. 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.
The embed code, when properly formatted, looks 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>
</object>
Don't copy this code to your web page—it's just an example!
Insert this code into your web page's HTML, where you want the video player window to display. What you get is a special click-to-play YouTube video player window, like the one shown in Figure 13.3, in line on your web page. 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.)
Figure 13.3. A click-to-play YouTube video window on your website.
To turn a click-to-play video into an autoplay video, insert the following code directly after both instances of the video's URL (no space between and before the end quotation mark): &autoplay=1.
Embedding a Video List in Your Web Page
YouTube also lets you embed a scrolling list of your YouTube videos on your web page, like the one shown in Figure 13.4. Visitors can click on any video in the list to view the video on YouTube.
Figure 13.4. A scrolling list of your YouTube videos for your web page.
To create this type of scrolling list, simply insert the following code into your web page HTML:
<iframe id="videos_list" name="videos_list"
src="http://www.youtube.com/videos_list?user=username"
scrolling="auto" width="265" height="300" frameborder="0"
marginheight="0" marginwidth="0">
</iframe>
Make sure you replace username with your own YouTube username.
Embedding YouTube Videos in Your MySpace Profile
Many MySpace users like to add YouTube videos to their profile pages. Fortunately, MySpace lets you edit the underlying HTML code for this profile page, which is how you embed YouTube videos.
Embedding an Individual Video
There are a few different ways to embed YouTube videos in your MySpace profile page. Perhaps the most common method is to embed a single video on your page. Unfortunately, you can't use YouTube's standard embed code because MySpace doesn't support the <object> tag—so you'll need to remove this tag from the regular embed code.
Here's what you do. Start by copying the embed code from the YouTube video page. Next, paste this code into your MySpace profile page HTML. Then delete the starting and ending <object> and </object> codes, so that the resulting code looks like this:
<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>
Your YouTube video should now appear on your profile page.
Embedding a List of Your Videos
Alternatively, you can embed a list of your YouTube videos in your MySpace profile page. To do this, add the following code to your profile page HTML:
<embed src="http://www.youtube.com/swf_show/username"
quality="high" width="425" height="350" name="myclips"
align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
Replace username with your YouTube username, and you'll create the type of scrolling video list shown back in Figure 13.4, but in your MySpace profile page.
Adding YouTube Videos 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. First, however, you have to tell YouTube about your blog, so it knows where to send the post.
Configuring YouTube for Your Blog
Start by clicking 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. This displays the page shown in Figure 13.5; click the Add a Blog/Site button.
Figure 13.5. Getting ready to configure YouTube for your own personal blog.
YouTube supports automatic posting to the following blog hosts: Blogger, Friendster, LiveJournal, WordPress.com, and WordPress self-hosted blogs.
YouTube now displays the Add a Blog/Site page shown in Figure 13.6. Pull down the Blog Service list and select your blog host; then enter your blog username and password. Click the Add Blog button, and you're finished with this preliminary setup.
Figure 13.6. Adding a blog to your YouTube configuration.
If you have multiple blogs, you can configure YouTube accordingly. Just repeat this setup procedure for each of the blogs you post to.
Posting a Video to Your Blog
Once configured, it's a snap to send any public YouTube video to your blog. Just open the video page and scroll to the options box below the video player window, shown in Figure 13.7. Click the Post Video link and YouTube displays the Post Video pane shown in Figure 13.8. Choose a blog from the list, 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 posts the video (and accompanying text) to your blog as a new post, like the one shown in Figure 13.9.
Figure 13.7. Click the Post Video link to post this video to your blog.
Figure 13.8. Posting a video to your personal blog.
Figure 13.9. A YouTube video appearing as a Blogger blog post.
If you have a WordPress blog, you can also embed a YouTube video into your blog using the following code: [youtube=url]. Replace url with the video's URL, as copied from the video page, and the click-to-play video will be embedded.
If you're a website developer, YouTube offers a set of tools, called the YouTube Application Programming Interface (API), that lets you develop web-based applications using YouTube videos. Learn more—and access the YouTube API Developer Forum—at www.youtube.com/dev.