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:
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:
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:
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:
Related posts:
Resizing Youtube video to fit main column or sidebar using calculation
Embed Youtube video in blog post
0 comments:
Post a Comment