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: Showit Video Gallery.

Or, watch the demo below.

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 the 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.

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.

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.

10. Test your gallery!

One note: You can set your videos to play automatically, however, the sound is muted. This is some internet rule about video. If you do NOT set to autoplay, no problem, the video will play with audio. For the demo, I set it to autoplay so you can see it roll, but I recommend you leave autoplay off.

Here’s the finished product: Showit Video Gallery

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.