Technique for embedding external video in gallery

stubble · October 27, 2008

I find I have typically have two types of movies to post, short clips that go along with an event's stills, and "feature" movies that stand alone, and might be anywhere from five to fifteen minutes long. For the former, Smugmug's video support works great. The clips go in a gallery with stills, and they tend not to be too long.

But for the "features" that are often too long to put on SmugMug directly, I've been playing with a solution that still allows me to show all my stuff here in a pleasing way. It's based on the official HOWTO for HTML-only gallery pages, but with a small twist, and I thought I'd share it.

First, you need a place to host your video. I like Motionbox and Vimeo, but even YouTube works, so I hear. Any place that allows you to embed video externally.

Starting with an empty gallery, upload a still image to serve as your album thumbnail. A screenshot from your movie works well.

Then, in the gallery's description, place the following, including the <html> tags:

<html>
<p>Write your description of the movie here.
<center>
<!-- Paste your provider's embed code below this line-->

</center>
<!-- Below this we place some CSS to hide the normal gallery components -->[FONT=monospace]
[/FONT]<style>.nophotos, .pagenav, .albumNav, #photos  {display: none;}</style>
</html>

That's it. Here's a sample gallery using the above, with a video from Motionbox:

http://www.smugmug.com/share/gzZhiAKtIBjmQ

Keep the above template in an easy-to-find place and paste it in when you need it. I like this method of hiding the gallery stuff over the official HOWTO because it's less work, you just change one place and you don't have to fiddle with the gallery ID.

Interested in further thoughts or refinements

iamback · October 30, 2008

Nice idea! I've bookmarked this already.

But, the code could be improved - here's how:

stubble wrote:
Starting with an empty gallery, upload a still image to serve as your album thumbnail. A screenshot from your movie works well.

Then, in the gallery's description, place the following, including the <html> tags:
<html>
<p>Write your description of the movie here.
<center>


</center>
<style>.nophotos, .pagenav, .albumNav, #photos  {display: none;}</style>
</html>
That's it. Here's a sample gallery using the above, with a video from Motionbox:

http://www.smugmug.com/share/gzZhiAKtIBjmQ

Keep the above template in an easy-to-find place and paste it in when you need it. I like this method of hiding the gallery stuff over the official HOWTO because it's less work, you just change one place and you don't have to fiddle with the gallery ID.

Interested in further thoughts or refinements

Maybe you don't fiddle with the gallery id, but what you end up with is invalid code: a <style> tag is not allowed inside the <body>, and some browsers will ignore it for that reason. With the result that the stuff you want hidden won't be for every viewer.

Much better to use valid code instead. Here's what to do:

First of all, close that <p> tag: put </p> at the end of your description.
from your code, take out the whole section from <style> to </style>
in your gallery, do a view source code, and look up the <body> tag: it has a class attribute with a number of space-separated values; one of these corresponds to your gallery ID; for instance:
```
<body onload="OnLoadHandler();" class="journal galleryPage gallery_6238489 tempClass category_Photo_products loggedIn bodyColor_Black">
```
where gallery_6238489 in my example is the value you need
now go to your customize page, and put the following in the CSS box (no <style> tag here!):
```
.gallery_6238489 .nophotos,
.gallery_6238489 .pagenav,
.gallery_6238489 .albumNav,
.gallery_6238489 #photos
{display: none;}
```
Note that I've put each rule on a separate line so it's easy to extend, and each is preceded by your specific gallery class to make this code specific to that gallery. (Make sure to replace gallery_6238489 with your own gallery class)
if you have several galleries that you would like to give the same treatment you could also put them all in the same category: the <body> also has a class for the category a gallery belongs to (category_Photo_products in my example), so if you use that instead of the gallery class, your rules will apply to any gallery in that category

It's only a fraction more work (or even less if you use a category for your video galleries), but it's more flexible and won't be ignored as invalid by any browser.

stmind · December 3, 2008

Just a quick update after refining my approach a bit. Here's how I'm doing the CSS now, and here's how I'm doing Motionbox embeds (It's Motionbox-specific). I'm pretty happy with the results.

(the OP above was me under a different profile)

Technique for embedding external video in gallery

Comments