11
Incorporating YouTube Videos on Your Own Website
YouTube is a great place to display your company’s videos, but you can display the videos you create for YouTube on your own website or blog, too. And the great thing is, you don’t have to host them— YouTube does all the hosting and handles all the traffic for you!
With that in mind, let’s look at the various ways to incorporate your YouTube videos into your company’s website or blog. It’s easy!
Adding YouTube Video Links to a Web Page
Not all companies want to include videos on their official websites. Instead, you might want to reference your YouTube videos without displaying them.
The easiest way to do this is via a link to a specific video on the YouTube site. Every YouTube video has its own unique web address or URL (uniform resource locator). You can copy and paste that URL into your company’s web page or into email messages, blog postings, and the like.
Linking to an Individual Video
As just mentioned, every video on YouTube has its own unique web address. When you navigate to a video page, its URL is in the Address box in your web browser.
To insert the link into a web page, copy the URL from your browser’s Address box and insert it into your page’s underlying HTML code, surrounded by the appropriate link tag. The resulting code should look something like this, although on a single line:
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 of the video you’re linking to. When visitors click the link in the text, they go to that video’s YouTube page.
Tip |
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 the message. |
Linking to Your YouTube Channel—Or List of Videos
YouTube also lets you link to your YouTube channel 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.
Tip |
You can also link to any playlist you create. 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 your YouTube videos is good, but embedding one or more of your videos on your own website is even better. That’s right; YouTube lets you insert any of your videos into your own website, complete with video player window.
The best thing about embedding a YouTube video on your site is that you don’t have to host the video on your site or handle the bandwidth when someone views the video. All you have to do is insert the proper code into your web page; the code references back to the YouTube site, which hosts the video. Visitors think they’re viewing the video from your web page, but YouTube is actually serving the video to the visitor. You don’t have to dedicate any storage space or bandwidth to the video.
Embedding a Basic Video
The process of embedding a video on your website is actually quite easy. 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, as shown in Figure 11.1. 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.
Figure 11.1 The embed code for a YouTube video.
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>
Caution |
Don’t copy this code to your web page—it’s just an example! |
Insert the embed 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 11.2, 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, YouTube’s servers deliver it to your viewer’s web browser, just as if your own server sent it.
Figure 11.2 A click-to-play YouTube video window on your website.
Tip |
By default, a visitor has to click the embedded video to play it. 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. |
Customizing the Embedded Video Player
When you use the standard embed code, YouTube embeds the default version of its video player on your web page. However, there are many ways to customize this player, which you might want to do to better blend the player into your web page.
To create a custom video player, click the Customize link above the Embed link on the YouTube video page. This expands the Information box with a bevy of options, as shown in Figure 11.3.
Figure 11.3 Customizing YouTube’s embedded video player.
Here’s what you can configure:
• Include/Don’t Include Related Videos —By default, YouTube displays a list of related videos after your video finishes playing. If you don’t want to show these videos, which will no doubt include videos from other users, check the Don’t Include Related Videos option.
• Themes —Choose from nine different color schemes; pick the one that best matches the colors of your web page.
• Show Border —When you check this option, YouTube displays a border around the video player, as shown in Figure 11.4.
Figure 11.4 An embedded video player customized with a different color scheme and border.
When you select an option, the embed code automatically changes to reflect your choice. Just copy and embed this new code to create the custom video player on your website.
Embedding a Video List in Your Web Page
YouTube also lets you embed a scrolling list of your YouTube videos on your website, like the one shown in Figure 11.5. Your site’s visitors can click any video in the list to view the video on YouTube.
Figure 11.5 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=”3θθ” frameborder=”θ” marginheight=”θ” marginwidth=”θ”> </iframe>
Make sure you replace username with your own YouTube username.
Tip |
If you’re a website developer, YouTube offers a set of tools, called the GoogleData Application Programming Interface (GData API), which lets you develop web-based applications using YouTube videos. Learn more at code.google.com/apis/youtube/. |