Monday, February 05, 2007

Testing embedding video in Blogger

A reader of my blogs posted a question in my post Migration to New Blogger (formerly beta) about uploading vidoe to his blog. My answer to him is he will have to host his video with a host like http://www.youtube.com/ and then copy the given script to embed into a post.

Script for Embedding Youtube videoI decided to test embedding of video myself to confirm my answer to his question. I made a search for environmental videos (my first blog is Enviroman Says), found a video related to the environment. I copied the script for embedding (not the URL, see screenshot), and tried to embed the video into a post, but found the video window to be too wide. This was the original script:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>


The width of the main column of this blog is 400px, but for the video, it was width="425" height="350". So what I did was to open a picture (any picture) with Irfanview, resize the image to 425x350 (Preserve aspect ratio radio button unchecked, the picture will of course become distorted), then check the radio button to preserve the aspect ratio and resize the width to 395. The height automatically changed to 325, so I changed the height and width of the video to width="395" height="325". (Note: Instead of opening any picture, you can also create an empty image 425x350, then with the preserve aspect ratio ticked, change the width to the width {or slightly less} of your main column , then resize). For those not familiar with how to find the widths of the various parts of you blog, refer to How to find the widths of your blog Header, main column (posts), sidebar. For those not familiar, I hope to do some tutorials later in the future and hope that I will remember to post a link here. Otherwise, try searching in my blogs in the "Blogger Resources" section in the right sidebar.

There were two places in the script where I had to change the width and the height. The new script which I posted in this post to produce the video below is as follows:

<object width="395" height="325"><param name="movie" value="http://www.youtube.com/v/qBro4dANNGU"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/qBro4dANNGU" type="application/x-shockwave-flash" wmode="transparent" width="395" height="325"></embed></object>




If you want to learn how to change the width of Youtube or other video websites, refer to FAQ: Youtube, Google video and Blogger.com

29 comments:

Mike Barer said...

That is a lot of info to digest. I'll have to take it slow, but thank you

Vrienden van Joost said...

EXCELLENT post - it all seems to work perfectly - a BIG THANK YOU from The Netherlands - Europe. Must have been hard work finding this out - it saved me a lot of headaches!

Google Execs - GET THIS SORTED OUT! Everybody seems to stumble across this problem - Blogger Beta (as fas as I am concerned it STILL is BETA!) not working together with YouTube correctly.

Thanks a Bunch again Dude!

Greg Young said...

This may be well and fine for Youtube, but Google video posting is still a nightmare. I can only find posts of many who are confused with the process (now that Blogger is not "beta"), but none that provide any useful answers. The key being the "login" process which gets hitched because Google and Blogger (new) cannot talk to each other. Any solutions out there? Thanks.

Greg Young said...

This is great if you are a youtube user. But I have searched for answers for Google video posting and have not received a good answer as to how to fix the login problem. It seems that the "new" Blogger does not talk to Google properly so the two does not hook up when trying to post a video from Google. Any answers for this one? Thanks.

Peter Chen said...

Hi Greg,

I really haven't been doing much with video and have yet to try Google video. Maybe I will have a go and see how I manage.

Peter
Dummies Guide to Google Blogger
"online book" in progress

efoote said...

I tried to research how to embed video (and just click on an image to play it) and all I could find was a bunch of technically tangled info.

But now you've made it so simple, with just a cut and paste of a few lines of code. I could care less about the 'google video' problem and will just upload all mine now to youtube.

Thanks much!

SolShine7 said...

Thanks, you helped me figure out how to make the YouTube videos fit in my sidebar.

Cito said...

Thanks for info, helped me fit my vids better on my blog.

Zulizawaty & Rifaee said...

wow..thanx man...ur advice helped me a lot!! i feel less of a comp idiot now..lol :)

liza

The Writer said...

Worked perfectly! Thank you sir.

motiono3 said...

You can also embed your videos on motiono, pretty cool.

Peter Chen said...

Hi Greg,

I am sorry but I didn't get email notification for your comment so apologise for late reply. However, you must have commented twice because I found a similar message in the list of comments. Anyway, I have a new message for you. Your comment:

"This may be well and fine for Youtube, but Google video posting is still a nightmare. I can only find posts of many who are confused with the process (now that Blogger is not "beta"), but none that provide any useful answers. The key being the "login" process which gets hitched because Google and Blogger (new) cannot talk to each other. Any solutions out there? Thanks."

Well, the new Blogger feature (what I call Video Direct) is just out of beta (Blogger in Draft) and I have just written a post on it at Video Direct just out of beta (Blogger in Draft). It is not finished yet and I hope to finish it before the end of the day.

Peter (Blog*Star)
Blogger Tips and Tricks

JOBIN LOPEZ said...

Thanks yaar it was very good of you to provide that tip
now i can make my blog more good
check my out
www.7dragonballs.blogspot.com
[link]www.7dragonballs.blogspot.com[/link]

Peter Chen said...

Hi Jobin,

Using [link] will not make your URL active (clickable). For that, refer to How to make an active (clickable) link in posts and comments.

Peter (Blog*Star)
The easiest way to earn something for your blogging efforts

nancy said...

oh yes!!
why thank you
this worked amazingly

kshirley said...

Could give us the width and heigth numbers to resize the videos for the side bar?

And thank you for the info.

Peter said...

Hi KShirley,

It will depend on your template. Refer to How to determine width of blog Header, sidebar, main column

kshirley said...

Just to say thanks again Peter...I got pretty lost trying to find the demsions for the sidebar of my blog template...I put my video in the main post element.

Thanks so much for keeping touch with all of us.

Shirley

Tim Freeman said...

Thanks it worked perfect for me.

Bee said...

I know zilch about computer programming & script, but I actually managed to figure this out in about ten minutes; thanks for the help!

Hayaah said...

OMG IT WORKED!

I thot i was an idiot box and wud never get it right.. i jst changed those number thingees and voila!

THANX MUCH!

:D

NYPH said...

very useful, but I found that to me, it was only setting the width and height to the numbers you posted and voila! video rezised.
watch the results: FL tutorial
thanks for the tip!

Little Grey Doll said...

Thankyou thankyou - changed the numbers and got the video in.

Anonymous said...

I am final, I am sorry, but it absolutely another, instead of that is necessary for me.

bianca.hinzfoley said...

I have resized the Youtube video and have the html script copied....now how do I actually embed this into my post? Everytime I go to embed a video, it doesn't ask for the script, but just a url...HELP!

bianca.hinzfoley said...

I have resized the Youtube video and have the html script copied....now how do I actually embed this into my post? Everytime I go to embed a video, it doesn't ask for the script, but just a url...HELP!

Peter @ Enviroman said...

You can copy the embed code from Youtube then paste it into your post editor in the Edit HTML mode if you want it in the main column or in a HTML/Javascript gadget accessible from the LAYOUT (now called DESIGN) tab, if you want it in the sidebar etc.

Una niña más said...

Hi.
If it want the video to be smaller, do I juts change the width in the script?

Thanks a lot

guntaka subbareddy said...

information stuff .a good thanks fron ongole prakasam dt ap india.thank for sharing