Tutorial: Video Showcase
A grid of YouTube and self-hosted clips that open in the lightbox, with posters, play badges and captions.
What you'll build: a tidy video wall — every clip the same size, a play badge on each, opening full-screen on click.
Time: about 15 minutes.
You'll use: Grid · Adding media · Lightbox · Content
Before you start
- The URLs of the YouTube (or Vimeo, TikTok, Wistia) videos you want.
- Any self-hosted clips uploaded to the Media Library.
- A featured image for each self-hosted video. This is the step that makes the difference — see Step 3.
Step 1: Build the gallery
- Create a page and add the Shaped Gallery block.
- Layout → Grid. Uniform tiles suit video: a wall of clips of different sizes reads as a mistake, and video thumbnails are all 16:9 anyway.
- Add from Media to open the picker.
Step 2: Add the videos
In the picker's left rail:
- YouTube → paste each URL → they're staged as items.
- Vimeo, TikTok or Wistia for any of those.
- Videos → select your Media Library clips.
- Add to Gallery.
Selection is cumulative across sources, so one trip gets everything.
Step 3: Give the self-hosted clips a poster
A video tile shows a still. Services supply one; self-hosted files don't.
Without a featured image, the tile falls back to drawing the video's first frame — which works, but that one tile can't be dragged on the canvas, and the first frame is often black.
Set a featured image on each self-hosted video in Media → your video → Featured image. Then the tile is a fully editable image and you choose the frame visitors see.
Pull a good frame
Take a screenshot at the most representative moment, upload it, and set it as the featured image. Two minutes per video, and the wall looks considered rather than accidental.
Step 4: Set the grid
Layout Settings:
| Control | Set to |
|---|---|
| Columns | 3 desktop / 2 tablet / 1 mobile |
| Horizontal Gap | 20 px |
| Vertical Gap | 20 px |
| Order | Default |
One column on mobile: a video thumbnail at 150 px wide tells nobody anything.
Step 5: Video playback
Image & Video Settings → Settings:
| Control | Set to | Why |
|---|---|---|
| Video Play Mode | Popup | Opens the clip in the lightbox at full size, rather than playing it in a small tile. |
| AutoPlay | Off | Irrelevant with Popup, and a wall of auto-playing video is hostile. |
| Play Icon Size | 56 | Big enough to read as a play button at 3 columns. |
| Display Icon on Hover | Off | The badge is what says "this is a video". |
| Resolution | Large | The posters are images like any other. |
Inline or Popup?
Inline plays in the tile — good for short silent loops. Popup opens the lightbox — right for anything with sound or anything longer than a few seconds.
Step 6: The lightbox
- Image Click Action → Click Action Type → Lightbox, Lightbox Click Action → Full Image.
- Then site-wide, at Settings → Modules → Lightbox → gear:
| Setting | Set to |
|---|---|
| Lightbox Theme | Dark Theme |
| Title | On |
| Image Caption | On |
| Item Counter | On |
| Slideshow Play Button | Off — auto-advancing through videos makes no sense |
| Download | Off |
Save Changes.
Step 7: Label the tiles
Content Settings:
| Control | Set to |
|---|---|
| Image Title | On, source Attachment Title, HTML Tag → H4 |
| Image Description | On, source Attachment Caption, Description Limit 2 lines |
| Content Display Style | Classic |
| Content Positions | Bottom |
| Content Alignment | Left |
Classic rather than Overlay here: a video wall's titles are content people read to choose what to watch, not decoration. Text under the tile is readable on every device, and with Grid the image stays square while the row grows to fit the tallest caption.
Titles need to exist
If your videos have no title or caption, you'll get a wall of empty labels. Fill them in via Edit Gallery on the block toolbar. More →
Step 8: A restrained hover
Image & Video Settings → Style:
| Control | Set to |
|---|---|
| Hover Animations | Lift |
| Animation Duration | 300 ms |
Lift reads as "this is a button", which is exactly right for something that opens on click.
Step 9: Publish and test
- [ ] Every tile has a poster, not a black box
- [ ] The play badge is visible and well-sized
- [ ] Clicking opens the lightbox and the video plays
- [ ] Arrow keys move between clips; Esc closes
- [ ] Titles and captions are correct
- [ ] One column on a phone, and tapping works
What you built
A uniform video wall mixing services and self-hosted files, with real posters, readable titles, and full-screen playback — all from one block.