Dazzle Up Your Site with VIDEO BACKGROUNDS!

leftquark

One of the features most requested when we first launched New SmugMug was the ability to make full-screen slideshows as the background to your site. We've now taken that one step further and allow you to add a video as your background. This can work on your entire site or any given folder, page, or gallery. Just go to the Customizer and to the "Background" tab to set it to Video.

Additionally, you can now set a "Mask" over the background image or video. This mask can have several color options as well and you can set its darkness. This will help distinguish text and images away from the background image, for example, when a light colored photo becomes the background on a page where there's light colored text.

A few notes:
- The video must be 60 seconds or less.
- We cannot cut the video to 60 seconds when it's used for the background, you'll have to cut and upload your videos to 60 seconds or less before setting them as your background.
- A fall back image is required, which will be used for older and mobile browsers which cannot load the video background.
- For large monitors, video backgrounds may look pixelated, due to the size of the browser in comparison to the resolution of the video.

Additional information and help can be found here: http://help.smugmug.com/customer/portal/articles/1367940

Example using a video background: http://aaronmeyers.smugmug.com/Test/Video-BG

dennismullen

What a great improvement! You could create page specific backgrounds from scratch in Adobe After Effects.
A quick little test...

http://www.dennismullen.com/SCUBA

Cheers,

ChancyRat

Wow wow wowwww!

ChancyRat

I have a technical question. I haven't tried this yet, but, what will the effect be on memory or accessibility to users with older computers? I made an assumption that somehow the technology would mean that a video would work the same as a plain color or image background. Is that true? Thanks.

leftquark

ChancyRat wrote: »

I have a technical question. I haven't tried this yet, but, what will the effect be on memory or accessibility to users with older computers? I made an assumption that somehow the technology would mean that a video would work the same as a plain color or image background. Is that true? Thanks.

For devices that might not have the processing power (like mobile phones), we drop back to the static image that you select, though we are looking into some options that will allow the video to play on those devices as well. We also are playing the video at a certain maximum quality level (not 1080p) so that the bandwidth and processing restrictions are easier. This does have the negative effect of adding some pixelization, especially on larger monitors, which are trying to stretch the pixels to the screen.

DougMartinVisuals

OK - that's pretty BEAST!

ChancyRat

leftquark wrote: »

For devices that might not have the processing power (like mobile phones), we drop back to the static image that you select, though we are looking into some options that will allow the video to play on those devices as well. We also are playing the video at a certain maximum quality level (not 1080p) so that the bandwidth and processing restrictions are easier. This does have the negative effect of adding some pixelization, especially on larger monitors, which are trying to stretch the pixels to the screen.

Thanks, Aaron. So - I'm testing this here:
http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/RVideoBackgroundTest/n-9WTHt6/

How do I get rid of the "this gallery is empty" and box and icon mess that seems to be the default to viewers? (I had no idea this was the case, I thought it was something I would see only when logged in.)

Thanks.

ChancyRat

Aaron, I forgot to ask my other question, which is how can I determine what the "load" is for viewers, of this type of gallery? I'm not even sure what "load" refers to - is it RAM use, bandwidth, blah blah? Is there a tool one could use to check different types of galleries to compare them?

leftquark

ChancyRat wrote: »

How do I get rid of the "this gallery is empty" and box and icon mess that seems to be the default to viewers? (I had no idea this was the case, I thought it was something I would see only when logged in.)

If you just want an empty page with a video background, I think you might be better suited using a "Page" instead of a gallery. The page you can leave empty without having the Empty Gallery text.

ChancyRat wrote: »

Aaron, I forgot to ask my other question, which is how can I determine what the "load" is for viewers, of this type of gallery? I'm not even sure what "load" refers to - is it RAM use, bandwidth, blah blah? Is there a tool one could use to check different types of galleries to compare them?

The short answer is that we'll display a static image for mobile devices and a video for larger devices. The factors that went into this decision were load speed (which would be based on internet connection, and might be slower on a mobile device) and processing speed (which again, could be slower and jerky on a mobile device).

We're working on some things to make the video background play on a mobile device as well. I'll post on Dgrin if and when it becomes available.

ChancyRat

Aaron, you said "If you just want an empty page with a video background, I think you might be better suited using a "Page" instead of a gallery. The page you can leave empty without having the Empty Gallery text," but I will end up adding a photo or something to this gallery, so I want to keep it as a gallery but not show the "this gallery needs photos" stuff. Isn't there css to hide this?

ChancyRat

leftquark wrote: »

The short answer is that we'll display a static image for mobile devices and a video for larger devices. The factors that went into this decision were load speed (which would be based on internet connection, and might be slower on a mobile device) and processing speed (which again, could be slower and jerky on a mobile device).

I'm not sure if I'm not clear, or if I just don't understand what you're saying, but it sounds like you're saying there's no way for me, the owner, to test any page for it's speed or load or whatever the right technical parameters are, for the average viewer. If I've got that wrong, please correct me.

ChancyRat

ChancyRat wrote: »

Aaron, you said "If you just want an empty page with a video background, I think you might be better suited using a "Page" instead of a gallery. The page you can leave empty without having the Empty Gallery text," but I will end up adding a photo or something to this gallery, so I want to keep it as a gallery but not show the "this gallery needs photos" stuff. Isn't there css to hide this?

There was css to hide the old variation of the 'needs photos', see here: http://dgrin.com/showpost.php?p=1490274&postcount=2

I've tried multiple ways to adapt to the current code but can't figure it out. thanks.

leftquark

ChancyRat wrote: »

Aaron, you said "If you just want an empty page with a video background, I think you might be better suited using a "Page" instead of a gallery. The page you can leave empty without having the Empty Gallery text," but I will end up adding a photo or something to this gallery, so I want to keep it as a gallery but not show the "this gallery needs photos" stuff. Isn't there css to hide this?

Hi Chancy,
Here's the code to hide the empty gallery box. You'll want to remove the code after you add a photo to the gallery. Would you be better suited just uploading a photo and not needing to add, then remove CSS?

/* Hide the empty gallery box */
.sm-gallery-empty {
  display: none !important;
}

leftquark

ChancyRat wrote: »

I'm not sure if I'm not clear, or if I just don't understand what you're saying, but it sounds like you're saying there's no way for me, the owner, to test any page for it's speed or load or whatever the right technical parameters are, for the average viewer. If I've got that wrong, please correct me.

Chrome's developer tools can show you a timeline and resource usage of your own browser load but your visitors could come from any location in the world, on any number of devices with various screen sizes. We use amazon services, which are located all around the world, to deliver the fastest load times possible. I'm not sure I fully understand what you're trying to investigate. Could you clarify why you're trying to understand an average load? are you finding your site loading slowly?

markderry

I usually do this by having all of the common browsers on my computer to test along with an iPad or iPhone that covers 95% of my visitors as measured by google analytics. The other 5% I am not overly worried about.