A video you spent a weekend editing deserves more than a small player squeezed into a column of text.
Stacking several YouTube embeds down one page doesn’t help either, because every one of them loads a full player before anyone presses play.
A WordPress video lightbox solves both problems. Your page shows clean thumbnails, and each video opens big only when a visitor clicks it.
I tested the setup below on a real WordPress site. By the end, you’ll have a video gallery that opens each clip in a lightbox and can play it full screen.
In This Article:
What Is a WordPress Video Lightbox?
A video lightbox shows your videos as thumbnails on the page. When a visitor clicks one, the video opens in a large window over the page, and everything behind it dims.
Visitors watch without leaving your site, then close the video and carry on right where they were.
It also keeps the page light. Only the thumbnails load until someone clicks, so a page with ten videos doesn’t have to load ten players up front.
WordPress does have a built-in lightbox, but it only works on images, as our guide to adding a lightbox to WordPress images explains.
Here’s a video lightbox gallery before anyone clicks, with a play icon on each thumbnail:
Before building one, it helps to know which videos you can put in it.
Which Video Sources Work in an Envira Video Lightbox
For this tutorial, I’m using Envira Gallery, the WordPress gallery plugin. Its video galleries accept videos from these sources:
- Video platforms: YouTube (single videos and playlists), Vimeo, Wistia, and DailyMotion.
- Streaming and hosting services: Twitch and VideoPress.
- Your own files: MP4 videos uploaded to your WordPress Media Library.
You can mix them in one gallery, so a YouTube clip can sit right next to a video you uploaded yourself.
For your own uploads, I’d stick with MP4 files. It’s the format that played reliably in every test I ran.
How to Add a Video Lightbox in WordPress
You won’t need any code for this. Most of the work happens on one gallery screen, and the rest is a single block on your page.
1. Install Envira Gallery
Start by installing and activating Envira Gallery on your WordPress site. If you haven’t installed a plugin before, the Envira installation instructions walk you through it.
2. Activate the Videos Addon
Videos come from the Videos Addon, which is included with the Pro plan and every plan above it.
In your dashboard, go to Envira Gallery » Addons and find the Videos Addon card. Click Activate (or Install first, if it isn’t installed yet), and the card’s status changes to Active.
If your Plugins page shows an update for the Videos Addon, install it before you continue. Keeping it up to date makes sure the video features below work as shown.
Turn Your Videos Into a Lightbox Gallery
The Videos Addon comes with Envira Gallery Pro and every plan above it. Mix YouTube, Vimeo, and your own MP4s in one gallery.
3. Create a Gallery and Add Your Videos
Go to Envira Gallery » Add New and give your gallery a name, such as Travel Videos.
Click Select Files from Other Sources, choose Insert Videos in the left menu, and then click Add Video.
Each video has a few fields to fill in:
- Title: the name visitors see at the top of the lightbox.
- Video URL: the link to your YouTube or Vimeo video, or the address of an MP4 in your Media Library.
- Image URL: the poster image that shows as the video’s thumbnail.
- Caption and Alt Text: a short description, plus alt text for screen readers and search engines.
For YouTube and other video services, the thumbnail is created from the video link for you. A self-hosted MP4 is different, because you’ll need to add the poster image yourself in the Image URL field.
A frame from the clip makes a good poster, since visitors see exactly what they’re about to watch. Here’s the panel filled in for a self-hosted video:
Click Insert into Gallery when you’re done, and repeat for each video you want to add.
4. Choose How Videos Play in the Lightbox
Next, open the Videos tab in the gallery settings. This is where you decide how each video behaves once it opens.
I’d turn on Display Play Icon Over Gallery Image? first, because a play icon tells visitors a thumbnail is a video. Display Play Icon Over Lightbox Thumbnails? does the same inside the lightbox.
Autoplay Videos? starts each video as soon as it opens. It’s off by default, and some video services only allow it with the sound muted.
Force Larger Videos? matters most for YouTube and Vimeo, so I’ll come back to it in the full screen section below. Here’s the top of the Videos tab with both play icons and Force Larger Videos turned on:
Further down, the player controls are all on by default. For self-hosted videos, you can show or hide the playback time, volume controls, progress bar, and video length with one checkbox each.
When you’re happy with the settings, click Publish to save the gallery.
5. Add the Video Gallery to Your Page
Open the page or post where the videos should go, click the + button, and add the Envira Gallery block.
Type your gallery’s name into the Search for a gallery field and select it. The block then previews your video thumbnails right in the editor.
The block sidebar lets you change the layout, row height, and margins without going back to the gallery screen:
Prefer shortcodes? Copy from the Envira Code box on the gallery screen and paste it into any page, then publish or update the page.
6. Preview Your Video Lightbox
Visit the page on your site and click any thumbnail. The video opens large over a dimmed page, and arrows let visitors move to the next clip without closing anything:
Clicking the close icon at the top takes visitors straight back to where they were on your page.
How to Open a Single Video in a Lightbox Popup
Sometimes you only have one video to share, like a showreel on your About page or a trailer next to a booking form.
The simplest option is a gallery with just one video in it. Give it a strong poster image, and you get one clean thumbnail that opens the video big.
If you’d rather use words than a thumbnail, Envira Link turns any text into a link that opens the gallery’s lightbox. You’ll find its shortcode in the gallery’s Envira Code box:
Paste it where you want the link to appear, then swap in your gallery’s ID and your own link text.
In my test, a text link opened the clip just as big as a thumbnail did. There’s more on opening a gallery from a text link in our docs.
How to Make WordPress Videos Play Full Screen
Full screen video in WordPress can mean a few different things. Here’s how to get each one that happens inside a lightbox.
If you upload your own videos, a self-hosted MP4 already fills the lightbox. In my tests, even a small 640 x 360 clip grew to fill the lightbox on a desktop screen.
Looking for a full-screen video that plays behind your homepage header? That’s a different feature, since Envira opens videos when a visitor clicks rather than playing them as a page background.
Make YouTube and Vimeo Videos Bigger
Embedded videos are different. Left alone, a YouTube video stops at its standard player size, even on a big monitor.
That’s what Force Larger Videos? on the Videos tab fixes. It enlarges embedded videos from YouTube, Vimeo, Twitch, and VideoPress so they grow with the screen.
When I tested it in a 1920 x 1080 browser window, a YouTube video grew from 1,280 pixels wide to almost 1,600.
Show the Player’s Fullscreen Button
For self-hosted videos, Enable Fullscreen? adds the player’s own fullscreen button to the video controls. It’s on by default, and you’ll find it near the bottom of the player controls on the Videos tab:
Clicking that button lets the video itself take over the screen, right from the lightbox.
Turn the Whole Lightbox Full Screen
For true full screen, the Fullscreen Addon (Pro and above) puts the entire lightbox into your browser’s fullscreen mode, video included.
Activate it from the Addons screen, then open your gallery’s Lightbox tab. Enable Fullscreen View? adds a fullscreen button to the lightbox toolbar, and Enable Fullscreen on Open? opens the lightbox full screen from the first click.
If the button doesn’t show up, check that Enable Gallery Toolbar? is ticked on the same tab. The Fullscreen Addon documentation walks through the setup.
Most mobile browsers already show pages full screen, so the button matters most for desktop visitors. The same addon works for photos too, as our walkthrough of fullscreen image galleries shows.
Give Every Video the Full-Screen Treatment
The Fullscreen Addon and the Videos Addon both come with Envira Gallery Pro and every plan above it.
Playing Videos in the Gallery Instead of a Lightbox
A lightbox isn’t the only option. If you’d rather have a video play right inside the gallery grid, you can switch that on for each video.
Click the pencil icon on any video in your gallery to open Edit Metadata, then tick Display Video in Gallery?. That video then plays in the grid instead of showing its poster image.
The same window has an Is 16:9 Video? option. Ticking it for a widescreen clip keeps black bars out of the lightbox.
For most galleries, though, I’d keep the lightbox, because it’s what gives each video the big screen.
FAQs About WordPress Video Lightboxes
Does WordPress have a built-in video lightbox?
No. The lightbox built into WordPress is the “Expand on click” setting, and it only works on images. To open videos in a lightbox, you need a plugin such as Envira Gallery with its Videos Addon.
Can I make a WordPress video play full screen?
Yes. A self-hosted MP4 in an Envira lightbox fills the lightbox on its own, and Force Larger Videos lets YouTube and Vimeo videos grow with the screen. The Fullscreen Addon goes one step further and puts the whole lightbox into browser full screen.
Can I open a YouTube video in a popup in WordPress?
Yes. Add the video to an Envira gallery by pasting its YouTube link into the Video URL field, and it opens in the lightbox when clicked. Whole YouTube playlists work too, but they need a YouTube API key first.
Why won’t my video autoplay in the lightbox?
Check that Autoplay Videos is ticked on the gallery’s Videos tab, since it’s off by default. After that, it’s down to the video service. Some only autoplay with the sound muted, some don’t support it at all, and Twitch videos always autoplay.
Which video format should I upload for self-hosted videos?
MP4 is the safest choice, since it played reliably in every test for this guide. Add a poster image in the Image URL field too, because self-hosted videos don’t get one automatically.
Do I need a paid plan for a video lightbox?
Yes. Video galleries come from the Videos Addon, which is part of Envira Gallery Pro and every plan above it. The free Envira Lite plugin doesn’t include video galleries.
A video lightbox gives every clip the screen it deserves while your page stays tidy. If you’re planning a bigger video collection, be sure to check out our post on how to create a WordPress video gallery.
Not using Envira Gallery yet? Get started today!
Don’t forget to follow us on Facebook and X (Twitter) for the best photography tips, resources, and WordPress tutorials.
