- Linking to a YouTube Video
- Embedding a YouTube Video in Your Website
- Customizing an Embedded Video
This chapter is from the book
This chapter is from the book
This chapter is from the book
Embedding a YouTube Video in Your Website
Linking to YouTube videos from your web page is one thing; embedding an actual video into your web page or blog is quite another. That's right—YouTube lets you insert any of its public videos into your own web page, complete with a video player window. And it's easy to do.
YouTube automatically creates the embed code for every public video on its site and lists this code on the video page itself. The code is in the information box beside the video, as you saw in Figure 9.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 own web page. Just follow these steps:
){kind=link}
- Go to the page for the video you want to link to.
- In the information box to the left of the video is an Embed box. Highlight and copy the HTML code in this box.
- Paste that HTML code into your web page's underlying HTML code where you want the embedded video to appear.
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, like the one shown in Figure 9.2. 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 9.2 A YouTube video embedded in a web page.
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="https://www.youtube.com/v/12345" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"> </embed> </object>