- How HTML Can Take You Further
- Power Tools for Better Blogging
- HTML Basics in WordPress
- YouTube as an Example of Embedded HTML
- Using the Text Widget
This chapter is from the book
This chapter is from the book
This chapter is from the book
YouTube as an Example of Embedded HTML
YouTube is a good example of a service that provides you HTML to put in your web page—in the case of WordPress, in your blog posting.
YouTube is a great service to use with WordPress. When you put a YouTube video on your site, all you really put on your site is a link. The actual video stays on YouTube's servers, not on WordPress's servers.
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):
- 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.
- 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."
- Find a video you want to share on your blog, or go to the video you just uploaded.
- 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.
- 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.
Figure 6.5 The Onion will make your blog visitors cry—with laughter.
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.
- Click in the code area next to the Embed prompt and copy the code.
- In your WordPress post, click the HTML tab.
- Scroll up and down in the blog post's HTML code to find the spot where you want to insert the video. This can be difficult in a long post. You might need to copy the HTML code out to another program, such as a word processor, and use its larger window, Find capability, and other functions to find the right spot, and then return to WordPress to insert the video in the spot you found.
- Paste in the HTML code, as shown in Figure 6.6.
Figure 6.6 HTML isn't usually funny, but the result can be.
- Preview the post to make sure the video works and that the settings you chose in YouTube are the best choices for your blog posting.
- If needed, return to YouTube and change the settings, repeating steps 6–11 until you're happy with the result.
)
)
When you're done, you'll have your blog posting where you want it, looking how you want it.