Saturday, October 11, 2008

Embed Video in sidebar


Update: For embedding Youtube video, you can do the resizing at Youtube.com itself by either ticking one of the 4 size option (560x340 640x835 835x505 1280x745) or by clicking CUSTOM and typing in your choice of width while letting Youtube automatically fill in the value for the height to keep the aspect ration constant (see screenshot below). However the method described in this post will still be useful if you want to resize other video embed codes or similar:



Method of resizing video embed codes while keeping aspect ration constant



A blog reader asked how to embed a video into the sidebar. I have embedded a video into the right-most sidebar at the bottom of Dummies Guide to Google Blogger. The method is not much different from the procedure to embed a as explained in embed Youtube video in blog post, but for completeness and simplicity, I will explain the procedure in full here:

The very first step is to find out the width of the sidebar as explained in how to determine the width of the blog Header, main column and sidebars. The blog Dummies Guide to Google Blogger uses a 4 column Minima template and the width of the right-most sidebar is 164 pixels.

The original embed script of the video is pasted into the scroll box below with the width and height attributes highlighted in red:

<object width="400" height="333"><param value="http://www.youtube.com/v/bU4gXHkejMo&rel=1" name="movie"/><param value="transparent" name="wmode"/><embed width="400" src="http://www.youtube.com/v/bU4gXHkejMo&rel=1" wmode="transparent" height="333" type="application/x-shockwave-flash"></embed></object>


We have to resize the video to fit into the sidebar. The easiest way is to first create an empty image with a photo editor such as the free Irfanview with the same width and height as the video (400x333). Then, with the option to preserve aspect ratio ticked, the width is changed to 160 and the corresponding height is noted (in this case I found it to be 133). So I changed all the width attributes to 160 and all the height attributes to 133.

I then get into the LAYOUT and clicked "Add a gadget" (previously "Add a Page Element") and then select HTML/Javascript and pasted the edited Youtube embed script into the page element:

<object width="160" height="133"><param value="http://www.youtube.com/v/bU4gXHkejMo&rel=1" name="movie"/><param value="transparent" name="wmode"/><embed width="160" src="http://www.youtube.com/v/bU4gXHkejMo&rel=1" wmode="transparent" height="133" type="application/x-shockwave-flash"></embed></object>



Update: "How do i find out if a video has embedding enabled!!!"

Look at this video for example: How to play make a circuit light a bulb game. If you look at the bottom, you will see at the bottom an EMBED button (highlighted in red). Click on the EMBED button and you will get the embed code:

Complete circuit light a bulb online game

In other circumstances, you will see an up arrow button at the bottom right corner of the video which when clicked will reveal the embed code (see screen shot below, arrow button and embed code highlighted in red:

Malaysia Singapore express Aeroline bus


Related posts:
Resizing Youtube video to fit main column or sidebar using calculation
Embed Youtube video in blog post

21 comments:

  1. Excellent! After hours of searching, I found your blog and your instructions worked perfectly!!

    ReplyDelete
  2. Hi Peter, thanks for the instructions. However I work on a Mac and I don't think there's an Irfanview for Mac that I can download. What to do now?

    ReplyDelete
  3. Hi Marina,

    It can be done also using mathematics (proportion). Will elaborate a bit later with more details.

    ReplyDelete
  4. Hi Marina,

    Refer to Resizing Youtube video to fit main column/sidebar using calculation.

    I used keyboard shortcut ctrl+U to view source of your blog and see that you are using Son of Moto template which has main column width of 400 pixels and sidebar of 226 pixels. The example uses these 2 figures to illustrate.

    ReplyDelete
  5. Thank you so much Peter, your advice is fabulous..so easy to follow and i have my video in my sidebar at last!! Keep up the great work.

    ReplyDelete
  6. However I didn't got the matter fully but slightly it was useful for me that i kept there a you tube video. But again my problem shouts that the videos are not related to those topics, i write. I need your kind regards as a brother, for my blog (:>)

    http://eclipsazoology.blogspot.com

    ReplyDelete
  7. Thank you so much!!! I've been searching and searching for a way to do this and your blog made it so simple. Rocknroll.

    ReplyDelete
  8. What if i want to post another video!!

    Can i do that by changing the url!!

    I did that but it didnt show anything

    Do i have to resize the youtube video separately

    how do i do that!!

    ReplyDelete
  9. "Can i do that by changing the url!!"

    I tested that by going to the URL in the embed code, namely http://www.youtube.com/v/bU4gXHkejMo&rel=1 and as expected saw a full size video and nothing else. So if you know that URL, you can substitute it in the embed code.

    But why would you want that? What are you trying to achieve?

    ReplyDelete
  10. I want to embed a youtube video of my own on my blog

    How do i go about achieving that!!!

    ReplyDelete
  11. Very simple. Sign into your Youtube account and click My Videos, go to that video of yours and get the embed code.

    Ask again if you are not able to do that.

    ReplyDelete
  12. cant i post any random video off youtube by pastin the url or is it has to be from my videos only!!!

    ReplyDelete
  13. You can embed any video which has embedding enabled not only your own

    ReplyDelete
  14. Thanx fr everythng man!!!

    Awesome work!!


    But sry to sound like such a noob!!!

    One last question...

    How do i find out if a video has embedding enabled!!!

    ReplyDelete
  15. Read the latest update at the bottom of this post.

    ReplyDelete
  16. how can i make a youtube video gadget??

    ReplyDelete
  17. You mean a Video Bar gadget that I have recently added as a test at the top right sidebar of DIY tips and tricks?

    ReplyDelete
  18. Thanks! Your instructions are very easy to follow. Is there a way to embed my own video, a wmv file saved on my computer?

    ReplyDelete
  19. That question is equivalent to asking "can the video be hosted on my computer which is not a server" and the answer is NO

    ReplyDelete
  20. Your instructions are fantastic!

    Thanks so much,
    Dee

    ReplyDelete
  21. but i want to have more than 1 videos that will play on a sidebar. what do i need to edit on the embed link or to add on the embed link to continue playing the videos until it reached the last video and go back to the first video again? unless the visitor has stopped the video by clicking the pause button on it.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics