Synicate Me

04 February 2008

How to add a youtube video to your blog

I realise you might be expecting a guide on how to monetize your blog. However, following my guide on Learning How To Write For the Internet, I had a few requests to explain exactly how one adds a youtube video to your blog. This is a quick guide on adding a youtube video to your blog, using HTML. Expect the monetizing guide soon!

How To Add A Youtube Video To Your Blog




  1. Go to the video on youtube. Just open the link of the video in your browser.

  2. Look for the word 'embed' in the 'About this video' box, to your right.

  3. Copy the code in the text box next to it. It is important to get all the code. Get everything between the object tags.

  4. Place this code on your page. Place the code wherever you want it to appear on your page.


This is a screen shot showing you where you should get the code:



This is an example of the code you should copy. Note that your code would obviously look different to mine if you want to put a different video on your blog:



How to resize the youtube video for your blog



Note that some layouts would prevent the youtube video from displaying properly. If you do not want to mess up your layout, just resize the youtube video.
  1. Don´t be scared by the code. It is pretty straightforward.

  2. Find the object and embed tags. Tags are HTML markers that help your browser to identify what it should display. You can also paste this code in a text editor before you paste it on your blog to make things easier.

  3. Note that each tag has width and height attributes. Attributes are used to specify to HTML tags what they should look like. In other words, attributes specify to tags how they should display.

  4. Both widths should be the same and both heights should be the same. Note that your widths may differ from your heights. The object tells your browser that you want to display an object like a video. The embed tells your browser where to find the video.

  5. An easy way to find the correct width and height values is to open a new document in Photoshop or GIMP. Make this document the size of the youtube width and height tags. Ensure that the size is locked, that is when you adjust the width, the height also changes. Now compare this document with the area on your blog where you want to put the video. If it fits, you have the values for your width and height tags.

    The values which work on my blog are 425 for width and 355 for height.

  6. Replace the values between the inverted commas directly after width and height in your text editor. Note that these are the only things you need to change. The inverted commas need to stay there.

  7. Copy and paste the modified code onto your blog.



Finally, this is what it looks like after you add the video to your blog:



Now you know how to add youtube videos to your blog. Expect some tips on how to monetize your blog soon!

Special thanks to memyselfandjuvy for requesting the video help.

Special thanks to Navin for asking how to resize your video.

4 comments:

jccleofe said...

Hello again, it's actually called Adsense Player what you're suppose to see is just like this:

http://www.youtube.com/img/preview_ads_mini_green.gif

I still can't figure it out..I've tried everything the wordpress.com/faq said.

Garg Unzola said...
This comment has been removed by the author.
Garg Unzola said...

Well, try this:
A video tutorial on how to add adsense player to your wordpress blog.

Unfortunately, I have no idea what you may be doing wrong. It could be that object tags are restricted for some reason, it could be that you are placing the object tags somewhere outside of proper body or p tags, it could be that not all the code is copied properly.

But try the video tutorial.

Navin said...

Hi, garg, nice tutorial, I want to add one more thing ify ou don't mind, we can change the width and height of the Youtube video too. Right? for approximation, what i do is, create a dumb image using IrfanView, then relatively set the size and width of Youtube video exactly and then minimize it on Irfanview, to the extent i like and replace the new width/height figure on Youtube's embed code.

Hope that is something of new to your readers :)

Regards
Navin