WordPress Video Gallery: How to Show YouTube, Vimeo and Your Own Videos in a Grid

Ten YouTube embeds stacked in a page make it slow, long and ugly.
Here's how to build a real video gallery in WordPress: your videos in a grid with their covers, played in a lightbox or right inside the grid, without slowing down the page.

Why not just embed the videos?

Pasting YouTube links in the editor works for one video. With ten or twenty, three problems show up:

• Speed: every embedded player loads its own scripts, even if nobody presses play. Many players mean a heavy page and worse Core Web Vitals
• Layout: videos end up one under the other, in a long page nobody scrolls to the end
• Order: no categories, no filters, no way to find the right video

A video gallery solves all three: a grid of covers, one player loaded only when needed, and filters to browse.

Ways to show videos in WordPress, compared

With Media Grid you're not tied to one platform: YouTube, Vimeo, Dailymotion and your own MP4 files live in the same grid.

Lightbox or inline: which one?

• Lightbox Video: the grid shows the cover, a click opens the video big in a lightbox, with title, description and share buttons beside or under it. Best for galleries, portfolios and tutorials
• Inline Video: the video plays right inside its grid cell. Best for a showreel or a few key videos that must be visible at first sight

You can mix them in the same grid, for example a big inline showreel on top and the other projects in lightbox.

Step 1: add your videos

Go to Media Grid → Add New Item for each video:

1. Write the title and, in the editor, the text for the lightbox: what the video is about, credits, links
2. Set the featured image: it's the cover in the grid. Use a real frame of the video or a custom thumbnail
3. Tick the Item Categories, for example "Tutorials" or "Interviews"
4. In Item Options choose the Item Type: Lightbox Video or Inline Video
5. In Video URL paste the link of the video, or click search in media library to pick an uploaded file
6. Check Use featured image as video poster? and choose whether to use Autoplay video?
7. Publish

Supported links and files:

• YouTube: normal links, short youtu.be links and YouTube Shorts
• Vimeo and Dailymotion
• Self-hosted videos: MP4, WebM and the other common formats, also with several sources separated by commas

Try it with your own videos: start your free 7-day trial and publish your video gallery today.

Step 2: build the video grid

1. Go to Media Grid → Grid Builder, create a grid with Add New Grid
2. In Add Grid Items pick the video items, filtering by category if you have many
3. Size each item: videos look best wide, for example half or full row for the main ones and one third for the others. Set the mobile sizes too
4. Save the grid

In the lightbox the player uses 16:9 by default. For vertical videos, like Shorts or Reels, change the Player's height of that item, which sets its aspect ratio.

Step 3: publish it with filters

Add the grid with the Media Grid Gutenberg block or Elementor widget, or with the shortcode:

[ mediagrid gid="15" filter="1" lb_thumbs_nav="1"]

• filter="1" shows the category buttons
• lb_thumbs_nav="1" adds thumbnails to the lightbox, so visitors jump from one video to another without closing it
• mf_lightbox="1" uses the media-focused lightbox, where the video takes most of the screen and the text stays at its side
• search="1" adds a search bar, useful with many tutorials

With Deeplinking active, each opened video gets its own URL: send someone the link and the video opens directly in the lightbox.

Video previews on hover

Every item, even an image or a link, has the Featured video box in the editor sidebar. Upload a short clip and choose:

• Play and display on hover: the cover comes alive when the mouse goes over it, like on streaming platforms
• Always play and display: the clip plays in loop in the grid

It's the best way to make a showreel grid without loading full players: a 5 second muted clip on the cover, the full video in the lightbox.

Want a play icon or a "Watch" label on the video covers? The Overlay Manager add-on lets you design the cover overlays, with an Item type icon that changes for videos, images and audio, and the [ mgom-type-txt type="video"]Watch[ /mgom-type-txt] shortcode to show a text only on the lightbox video items. It's included in the Media Grid Bundle Pack.

Keep the page fast

• Use the poster: with Use featured image as video poster? checked, YouTube and Vimeo players are not loaded with the page. The visitor sees your cover, and the player loads only on click. Self-hosted videos don't preload either
• Optimized covers: Media Grid creates thumbnails at the right size for each grid cell
• Pagination: for long archives, split the grid into pages or use infinite scroll

For self-hosted videos that don't fill their space, Settings → Main Options → Various → Self hosted video - background mode fills the gaps with a blurred copy of the video instead of black stripes. The players look can be set in Colors → Audio & video players theme, Modern or Classic, dark or light.

Real-world examples

• Videomakers and production companies: showreel inline on top, projects in lightbox, filtered by client type
• Coaches and online teachers: free tutorials by topic, with search, to bring visitors to the paid course
• Musicians and bands: video clips next to tracks with an audio player and photos of the concerts
• Companies: product demos, customer interviews and event videos in one page
• Real estate and travel: property and destination tours, filtered by area

Mixing videos with projects and images? See also how to build a WordPress filterable portfolio.

Frequently asked questions