Customizing videos in Blogger - Part 3

January 31, 2009

In tutorial How to add a video in Blogger we've talked about the options of placing a video in our Blog...Them in Part 1 and Part 2, we've learned something about video customization, slideshows...
This time, I'll show you how to make a Video Gallery and set the video to Autoplay.

MAKING A VIDEO GALLERY
Video Gallery or Video Wall is a group of your favorite videos (personal or public ones) displayed in a gallery box with video thumbnails.

◄ DailyMotion Video Wall ►
Dailymotion is a video hosting service website with great interface and features. You can share videos, create your channels...
Here's the example of the video wall created in Dailymotion:

...stylish. Anyway, the steps are:
► create an account with Dailymotion.com
► go to My Channel
► under Video Tools (left menu), select Create a Videowall

Options:
► choose a channel you'd like to display (public, or your personal..)
► you can adjust the size (rows, columns)
► autoplay. zooming, video titles, spacing...

Copy the provided code, and paste it into your Blog Post, or Sidebar/Footer using a HTML/JavaScript gadget from Add a Gadget (LAYOUT ► PAGE ELEMENTS)

....as simple as it gets...

◄ BLINKX Video wall ►
Blinx is the world’s largest and most advanced video search engine. It's very intuitive. You'll figure it out in a second...Here's the example of the Video wall created in Blinkx:



..Steps:

► go to blinkx.com
► search for the videos of your interest
► drag the videos into your playlist box (bottom left)
► when you're done (you can place 1 or 101 video - it doesn't matter), click on Wall it on the bottom of the box..
► copy the provided code, and paste it into your Blog Post (rather in HTML MODE, than COMPOSE)

Video wall will have a certain width and height....Just change it to fit your Blog post (refer to resizing videos in Part 1)

That's it...

◄ Videos in HTML tables ►
Here is another way of organizing videos in your Blog. It's quite old fashioned, but still works. In this example, I've made a video gallery from Youtube videos (you can use videos from anywhere, of course):

Video 1	Video 2	Video 3	Video 4
Video 5	Video 6	Video 7	Video 8
Video 9	Video 10	Video 11	Video 12

...3 rows with 4 columns, and a caption for each video...You can modify the videos size, add some borders, background color...
..if you like it,click here to grab the code:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable"><table>
<tr>
<th align="center">Video 1</th>
<th align="center">Video 2</th>
<th align="center">Video 3</th>
<th align="center">Video 4</th>
</tr>
<tr>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
</tr>
<tr>
<th align="center">Video 5</th>
<th align="center">Video 6</th>
<th align="center">Video 7</th>
<th align="center">Video 8</th>
</tr>
<tr>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
</tr>
<tr>
<th align="center">Video 9</th>
<th align="center">Video 10</th>
<th align="center">Video 11</th>
<th align="center">Video 12</th>
</tr>
<tr>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
<td>Video code goes here...</td>
</tr>
</table></div>

...replace the lines in green with your own titles, and lines in orange with the video code provided from a site (Youtube, Metacafe....)

SET A VIDEO TO AUTOPLAY IN BLOGGER
Here's the example how to set a Youtube videos to autoplay when your Blog post is opened:
The original video code:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/8VWcqILJam4&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8VWcqILJam4&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

And after tweaking:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/8VWcqILJam4&hl=en&fs=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8VWcqILJam4&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

..you have to add &autoplay=1 (in orange) just like in the code above...in both places.

That's it...if you have any questions, scream!

Smile!