Grab my Free resources to help you feel good.

Yes please

menu

How to Create A Video Gallery in Showit

If you’re not already familiar with Showit, let me just say how much you’re missing when it comes to web design. Showit is the app I use now almost exclusively for site design and it’s absolutely the best on the market for creatives who feel limited by templates on sites like Squarespace or WordPress.

As a video director and television producer, I was always on the hunt for an easy and inexpensive way to update my work and create a gallery that worked with my design aesthetic. While Showit makes it super easy to use photos in a gallery, it was a bit more challenging to figure out a way to display video in a scrolling gallery.

First, here’s what the finished product looks like:

You can also test drive it live on the Emotional Pictures site.

In order to create a gallery that moves with descriptors like the example above, there are a few steps to making video work. Here are the step by step instructions I used to create the video gallery above.

1. Create A Gallery

On your canvas, create a new gallery. Then, you’ll want to have one photo for each video you’re showcasing. I simply took screen grabs from the video.

On the right side of your panel, click on “size & position”. Set the gallery to “stretch” (the last option).

2. Add Arrows on left and right.

The arrows in my version appear far right and far left. In the Horizontal locking area, set the left arrow to stay left of screen and right arrow to right side of screen.

3. Set up Description Area

Next, on the canvas side, add a canvas view. In this example, I set up Title, role, description. Then, I created a clickable link “see excerpt”. Once you’re happy with the design, set up the view for mobile.

Here’s how mine looks on mobile:

4. Create Additional Views for Each Video you want to display

Once you’re happy with how your description looks on desktop and mobile, you can duplicate additional views.

5. Create a video canvas for each video

You’re going to create a canvas that will pop up when the user clicks on “watch”. In my case, I simply did a black background. You want to add an icon “X” so the user can click back to the gallery. Choose your background, then use the following settings to create it as a pop up on both mobile and desktop.

Click on video to add a video Frame to the canvas
Select the video you want to display from YouTube or Vimeo. You can also select the player color here and other options for display.
These are the settings I used for the mobile video canvas. Make sure you click “Hidden to start” and set the display to “sticky”
These are the desktop settings for the video canvas

Once you’re happy with both the mobile and desktop layout, add the “X” by choosing an icon. Then go to “click action” and select “hide canvas”.

Now you can duplicate this video canvas for as many videos as you have. The only change you need to make is the video URL.

6. Set up your trigger links for each video in the gallery.

Now that you’ve created your video canvases, go back to your video description and set up the click action for “see excerpt” (or whatever you want to say). Go to each Description view and enter the corresponding video link.

7. Make sure you have a canvas and photo in gallery for each video you want to display.

Each photo will need a corresponding description. You’ll also want to make sure your photos and descriptions are in the same order. So for instance if your first photo is ABC, make sure the first view is the ABC description.

8. Set the click action for your arrows.

Click on each arrow icon and set the click actions. For left arrow select “previous” and for right arrow select next. You also need to click “loop canvas views” and “reverse transition direction”. This way the user can scroll back or forward. The settings below will allow for the arrows to advance your descriptions in sync with the photo.

This is the setting for the left arrow (previous). For the right select “next”

9. Create an “Overlay” over the photo gallery

In order for your video gallery to function properly and scroll with the descriptions below, you need to put a text box OVER the photo gallery to prevent scrolling when someone touches the photo on mobile or iPad. This essentially make the photo gallery non-moveable except with the arrows. Your arrows will now move BOTH the photos and the descriptions. To do this, I simply created a blank text box and made sure it was located above the gallery itself in the element list. Be sure to adjust the text box in the mobile view.

Set the overlay to be above the photo gallery.

10. Test your gallery!

Click here to see it on the live site

One note: I would LOVE to have my videos automatically start playing when they pop up, however the internet gods have deemed that uncool so even if you set the video to autoplay, the sound is automatically muted. I recommend just allowing the viewer to hit play so that sound is there immediately.

Hope this works for you! I love how the gallery takes up so little space on the page and is easy to navigate on both desktop, iPad and mobile. Holler with questions or comments below.

Hi there

I'm Sara!

Get The Plan That's helping Me Lose 100 pounds

Yes please!

I'm a Wife, Mama, Video Content Creator, Website Design Freak, Old House Renovator And Dog Lover. I'm so glad you're here!

get My Free Renovation Budget Template

Gimme that!

Freebies

top categories

The Luminous

Reach your weight loss goal and make peace with food.

The Farmhouse

Tales from the renovation trenches.

xox Sara

Add a comment+

Show Comments +

Leave a Reply

Your email address will not be published. Required fields are marked *

The Farmhouse

top categories

read more on the blog →

The Luminous

Calling All Creators

Renovation 101

Living in and loving my updated 1835 home AKA "The Manse".

Inspiration to support you on your weight loss journey.

Tips & hacks to help you tell your story in video, photo & social.

Tales and how-to's from the renovation trenches.

free download

The Luminous Plan

Get the free plan that is helping thousands reach their goal weight. 

free download

Renovation Budget Template

Get the exact template I use for all home renovations. Plug in the numbers and let the template do the math!

gimme that!

tell me more

Grab my free

Renovation Budget

It's the exact template I used to do two whole house renovations. Choose your favorite format: Google Sheets,  Excel or Numbers (for Mac). Itemized by room with a break down of costs for construction, fixtures and finishes.

Privacy: We hate spam and promise to keep your email address safe. No spam. Only love.

Thank you for subscribing!

Privacy: We hate spam and promise to keep your email address safe. No spam. Only love.

Free!

End Cravings & Embrace More Joy

The Luminous Plan

Thank you for subscribing!