Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Aug 25, 2007

Digg This Story

Customize Video Upload in Blogger

We wrote an article some time back suggesting how you can Add Video to Blogs. We highlighted two popular video hosts – Google Video and YouTube. Just yesterday (Aug 24, 2007) Blogger released its new Video Upload feature from its Blogger in Draft. There is now an icon in your Post Editor allowing you to upload a video into your post, in the same manner as you would for photos. At the moment, the feature is only available in the Post Editor and not as a Page element. However, we shall explain how you can insert the video into the Sidebar Page Element and not merely have it in the Post. As well, you will learn how to resize and align the uploaded Blogger video.

Upload Video

When creating a New Post, you can see a new “Add Video” icon in the toolbar:-

Customize Video Upload in Blogger

Write the post and when you want to add a video, click this link. You will be asked to upload a video file from your computer. This file has to be in AVI, MPEG, QuickTime, Realplayer, and Windows Media formats and should not exceed 100MB in size. We don't know if there are bugs but we tried uploading 10 videos in different formats and were not successful in 8 of them. If you do see an error message, you can report it to Blogger Support citing the incident ID and try to upload it again. At the same time, assign a title to the video.

Customize Video Upload in Blogger

Video Upload Terms and Conditions

At the bottom, you will have to check the box to indicate that you have read and agreed to the Upload Terms and Conditions. These are the terms imposed by Google Video which Blogger is using for their video upload function. Most of us would not have bothered to read the standard terms. Nevertheless, from a layman's perspective, some salient terms are worth noting:-

1. Google has a non-exclusive, world-wide, royalty-free license to use your name, logo and brand for advertising or promotional purposes.

2. If Google offers a service whereby you may charge end users to download or view your videos, you will receive only seventy percent (70%) of the gross revenues.

3. You warrant that you have the right to use and upload the video. Among other things:-

a. You are at least 18 years of age and are legally allowed to enter into the Agreement and grant license rights.

b. The video is not, in whole or in part, pornographic or obscene.

c. You own all the necessary rights, such as copyrights, trademark rights and rights of publicity in the videos.

d. The display or use of the videos do not and will not violate any applicable laws or regulations and will not be in breach of any rights of persons or intellectual property. (Bear in mind that YouTube has faced many threats of actions and lawsuits by notable figures around the world for illegal videos uploaded onto their site.)

4. If there should be any liability imposed on Google, you have to indemnify them.

Storage Space for Videos

Once you are done, the upload process will start, and since the files are usually big, it will take much longer than photos. You can in the meantime continue to work on the remaining contents of your Post. We had mentioned in Manage Blogger Image Storage Space that there is a 1GB storage limit for photos and images uploaded into your Blog. Since videos are hosted under Google Video and not Picasa Web Album, the video files will not be taking up this storage space. The Google Video terms do not seem to stipulate a storage limit for uploaded videos.

Resize Video

The Blogger video has a width of 320px and a height of 280px. This should fit nicely into the Blog Post segment of all standard Blogger templates. Some people may have customized their Blog layouts and reduced or extended the width of the Blog Posts. To adjust the size of the uploaded videos, after uploading it, view the post under “Edit HTML” mode instead of “Compose” mode.

Customize Video Upload in Blogger

Locate the video code. It should look something like this:-

<object id="BLOG_video-f4854f080ae662a4" class="BLOG_video_class" contentid="f4854f080ae662a4" height="280" width="320"></object>


You can change the width and the height (shown in red). Just ensure that the width does not exceed the width of the main post column, which is usually found under the #main-wrapper or #main-wrap of the template source code.

Align Video to Center or Right

By default the video is aligned to the left of the post. If you want it in the center, you may add this code (in blue) to the above video code.

<div align="center"><object id="BLOG_video-f4854f080ae662a4" class="BLOG_video_class" contentid="f4854f080ae662a4" height="280" width="320"></object></div>


Change the word "center" to "right" if you want it on the right side of the post.

Place Video in Sidebar

As mentioned above, there is presently no “Add Video” option under “Add a Page Element”. To have a Blogger video in the sidebar, we have to first create a post. It can be a temporary post which you can delete later. Upload the video and follow the above guidelines to resize it to a small screen. For example, we resized our test video to a width of "200" and height of "180". Publish the post.

Refresh your Blog. You should see the temporary post together with the small video. View the source code of your Blog. For Firefox users, in your browser toolbar, go to View -> Page Source or press Ctrl+U. For Internet Explorer users, View -> Source. Next, press Ctrl+F, enter the word “video” to search for the video code. It is a rather long code and looks something like this:-

<object classid="..." id="BLOG_video-f4854f080ae662a4" codebase="http://download.macromedia.com/pub/shockwave/ cabs/flash/swflash.cab#version=6,0,40,0" width="180" height="200" class="BLOG_video_class"> <param name="movie" value="..."> <param name="bgcolor" value="#FFFFFF"> <embed width="180" src="..." type="application/x-shockwave-flash" height="200"></embed> </object>


Block copy this entire piece of code. Now go to Template -> Page Elements -> Add a Page Element in the sidebar, and choose “HTML/JavaScript”. Paste this code. If you want the video to be in the center of the sidebar, add the alignment tags outlined in the earlier section. After saving, drag and drop the element to the part of the sidebar where you want it to appear and Save the Template. You may go to Posting -> Edit Posts to delete the temporary post. View your Blog to see the Video in the Sidebar!

Customize Video Upload in Blogger

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

8 comments:

Ahmet Korkmaz said...

it a very nice post.
thank you very much.

sincerely from www.electroblog.org

Jeff B said...

This is a great site! I've been looking for a good Blogger hacker for months now, and this is the best one I've found.
I have a question though. I was pleased to see the new Video Bar function powered by YouTube in the page elements section but it's not as good as I want it to be, as it won't let me choose which videos I want to put in there.

I'd really like to put a horizontal video bar, with only the videos I want at the top of my blog. Do you have any tips or tricks or html code that could help me do this?

Z said...

Thanks! I just used the centering information.

Chris, Randi and Jonathan said...

Hi, Thanks for the info! I have a video on my computer that has been rotated, however, when it uploads to blogger, it appears sideways (like the original). Any ideas on how to change the blogger code to make the video appear vertically, not horizontally? Thanks! Randi

Eddy Woo said...

Thanks for the information.

By the way, sometime when I upload my video, the process indicator seem to disappear or gone blank, like this ( of ).

Does it mean the uploading process has stop?

David Bergeron said...

Hi, I noticed when I upload my videos to blogger, the videos are set to private. Do you know how I can set it to share with everyone?

Cotorra Films said...

I would like to make bigger my videos, tried what you are explaining and it results in a blurry image.

It seems that blogger resize the video while processing it and therefore it can't be made bigger without loss of quality/resolution.

Is there any probably way to go around this and make it bigger maintaining the resolution?

thanks in advance.
cotorrafilms.blogspot.com

Mohammad Mustafa Ahmedzai said...

Great Job! really appreciated it. This has given me a new idea of hacking the source file of any website :D
Sincerely from,
www.TECfun.co.nr , a blog on 16 O level Friends