How to embed a You Tube player in your blog post
|Wow. Ever since I wrote a post about the You Tube site, I've been getting hit after hit from searches looking for some variant of "How do put a your-tube player on your blog?"|
So I figured I oughta answer the question. But first let me remind those of you who are new to web stuff - you can often learn how something was done by viewing the source of any web page. On FireFox, in the main menu, select View, and then Page Source. In IE - oh, figure it out, I'm not gonna open IE just to look... and remember, on a blog page you need to wade through all the sidebars and headers to see how something was done in a post. So you might want to search for a phrase in the post to get there quickly. You could search for Wow to find the player on this page, for example.
If you look at any video on You Tube - like this one - you will see on the right hand side of the page, next to the player, a box captioned "About this Video". It looks like this:
The second line in that box is an Edit labeled Embed. In it will be a string of text that is the complete HTML code you need to embed this video on your log or website. If you click in here the entire string will be selected. Then use Ctrl-C to copy this text onto the clipboard.
Now you just need to paste this text into your blog post.
Careful: Do not copy it into your wysiwyg editor, but into the HTML view of the post. On Blogger, for example, click Edit HTML and paste it in there!
Sizing the player: if you want to make the player smaller, change the height and width of the object and embed tags.
Careful: change them both by the same proportion or your viewer will look warped! And change both places where the height and width occur.
Prettying it up. If you want the text to wrap to the right of the player, like on this post, put div tags around the entire block of code and set the style to float:left. You will also want to set a margin, so the text is not sitting right on the player. So the whole thing, might look like this:
<div style="margin: 4px; float: left;"><object height="235" width="285"><param name="movie" value="http://www.youtube.com/v/LVCb52iQrfo"><embed src="http://www.youtube.com/v/LVCb52iQrfo" type="application/x-shockwave-flash" height="235" width="285"></embed></object></div>
This is the code I used to put the player on this post, where you can see some unusual percussion playing.
Tags: nptech, youtube, video