Archive for June, 2010

Showing Videos in Exhibitions

Tuesday, June 15th, 2010

You can show videos in the place of pictures in galleries. The videos must be hosted on a video sharing website, such as Vimeo.com or YouTube.com.

Since the video should be the same height as other images in a gallery, try to create your video 300 pixels high. The width doesn’t matter. However, since the videos resize well, if yours is large it will work just fine.

Here’s how to work with Video on Vimeo.com (YouTube.com works almost exactly the same way).

Get an account on Vimeo. Log in to your account. Upload your video. After the website has processed your video, you’ll be able to watch it, and there will be a link titled, “Embed.” Click on it, and you’re given some code in a box. The code will look similar like this:

<object width=”400″ height=”225″>
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”movie” value=”http://vimeo.com/moogaloop.swf?clip_id=12505507
&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1
&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1″ />
<embed src=”http://vimeo.com/moogaloop.swf?clip_id=12505507&amp;server=vimeo.com
&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF
&amp;fullscreen=1″ type=”application/x-shockwave-flash” allowfullscreen=”true”
allowscriptaccess=”always” width=”400″ height=”225″>
<
/embed>
</object>
<p><a href=”http://vimeo.com/12505507″>Antoine Goff</a> from <a href=”http://vimeo.com/user1988155″>David Gross</a> on <a href=”http://vimeo.com”>Vimeo</a>.</p>

Copy the code. When you click on the code, all of it will automatically be selected, so you can simply choose “Copy” from your edit menu.

Now, go to your gallery website. Log in, go to the exhibition that will show the video, and upload a new image. It does not matter what the image is, so make it small! Really…the uploading just creates a new place-holder which we will use to hold the video. This is not the best way the system could work, but it will do for now. Once you have the new image, edit it. The third checkbox down is titled, “This is a video, not a picture.” Check it, and a new text box appears.

Paste the “Embed” code, above, into the text box. The only part you want is the object definition .That means the <object> </object> codes and everything in between them. Erase the extra code. Here’s what the code looks like after I’ve deleted the extra stuff at the end:

<object width=”400″ height=”225″>
<param name=”allowfullscreen” value=”true” />
<param name=”allowscriptaccess” value=”always” />
<param name=”movie” value=”http://vimeo.com/moogaloop.swf?clip_id=12505507
&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1
&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1″ />
<embed src=”http://vimeo.com/moogaloop.swf?clip_id=12505507&amp;server=vimeo.com
&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF
&amp;fullscreen=1″ type=”application/x-shockwave-flash” allowfullscreen=”true”
allowscriptaccess=”always” width=”400″ height=”225″>
<
/embed>
</object>

Now, we need to set the size. Since pictures in your gallery are probably 300 pixels height (only custom installations would be different), you want your video to be 300 pixels height. So, we need to calculate a proportional width, this way:

(width / height) x 300 = new width

Using the example above, I can see from the code that the width is 400, and the height is 225 pixels. So, I calculate like this:

(400/225) x 300 = 533 wide

Now, on the picture page in my gallery, just above where I pasted the “embed” code, I put 533 into the first box (“wide”) and 300 into the second box (“high”).

Save your work by clicking the “Save” button or the “Save and Close” button.

Your video should appear in your exhibition. You can use the “Organize” exhibition editing page to move it around in the exhibition.

Note that not all themes support this well — flexible themes, for example, won’t work correctly. That’s because unlike pictures, a video isn’t supposed to resize.