Opening Livid videos in a lightbox on WordPress
By default an embedded video plays inline, inside whatever box you put it in on the page. If you want a viewer to click a thumbnail and have the video open in an overlay on top of the page instead, WordPress needs a lightbox plugin to do it.
This relies on a third party WordPress plugin rather than on a feature built into Livid. It works today, but we do not control the plugin, and we cannot guarantee it will keep working if the plugin changes. For standard inline embedding, use the Livid WordPress plugin instead.
If you do not specifically need the videos hosted on your own site, a Livid showcase already does this without any setup. Showcases open videos in a lightbox when clicked, and you can share the showcase link directly.
What you need
Firelight Lightbox (formerly Easy FancyBox), the free version. Everything below works on the free tier. You do not need the Pro extension.
Install it from Plugins > Add New, search for "Firelight Lightbox", install and activate.
Step 1: Configure the plugin
Everything you need to change lives on one page. Go to Lightbox > Settings in your WordPress sidebar.
In the section called FancyBox Classic: Enable, tick Enable for iFrames.
This is the setting people miss. It is in the general Enable list at the top of the page, not in the separate iFrames section further down. Without it, nothing else in this guide will work.
Then expand FancyBox Classic: iFrames and set the size of the overlay:
- Width and Height are percentages of the browser window. Start with 70% and 50%.
- Border should be 0.
- Tick Allow fullscreen. Without it, the fullscreen button in the player will not work.
There is no aspect ratio option. The plugin sets width and height independently and cannot detect the shape of the video, so you are matching 16:9 by hand. The starting values above are a reasonable guess, not a final answer. Come back and adjust them once you have a video on a page and can see the result on a real screen.
Save changes.
Step 2: Get your video's embed URL
In Livid, open the video and click the share icon, then choose Embed.
You will see an embed code that looks roughly like this:
<iframe src="https://livid.com/embed/abc123" ...></iframe>
You only need the URL from inside src . Copy that. Do not use the whole embed code, and do not use the share link.
The distinction matters. The share link points at the video's watch page, which includes the page header, comments, and other elements around the player. If you use that URL you will see all of it inside the lightbox. The embed URL gives you the player on its own.
While you are in Share & Embed, it is worth setting Restrict embed domains to your own domain. That stops the embed URL working if anyone copies it onto another site.
Step 3: Upload your thumbnail image and copy its URL
The image is what your visitor clicks. It needs to be hosted on your own site, so upload it to your WordPress Media Library rather than linking to an image somewhere else.
Prepare the image. Use something that represents the video, at the same shape as the video itself so the thumbnail does not look stretched. For a standard 16:9 video, an image around 800 by 450 pixels is plenty. You do not need anything larger, because it will be displayed smaller than that on the page.
Upload it.
- In WordPress, go to Media > Add New.
- Drag your image file onto the upload area, or click Select Files and choose it.
- Wait for the upload to finish.
Copy the URL.
- Click the image you just uploaded. The attachment details panel opens.
- Find the File URL field. Depending on your WordPress version it may be labelled Copy URL to clipboard instead.
- Copy the URL. It will look something like
https://yoursite.com/wp-content/uploads/2026/08/my-thumbnail-800x450.jpg.
Keep that URL somewhere handy. You will paste it into the code in the next step.
Step 3: Get your video's embed URL
In Livid, open the video and click the share icon, then choose Embed.
You will see an embed code that looks roughly like this:
<iframe src="https://livid.com/embed/abc123" ...></iframe>
You only need the URL from inside src . Copy that. Do not use the whole embed code, and do not use the share link.
The distinction matters. The share link points at the video's watch page, which includes the page header, comments, and other elements around the player. If you use that URL you will see all of it inside the lightbox. The embed URL gives you the player on its own.
While you are in Share & Embed, it is worth setting Restrict embed domains to your own domain. That stops the embed URL working if anyone copies it onto another site.
Step 4: Add the link
Use a Custom HTML block in the block editor, or the HTML widget in Elementor.
<a href="YOUR-EMBED-URL" class="fancybox-iframe"> <img src="YOUR-IMAGE-URL" width="400" height="225" style="width:100%;max-width:400px;height:auto;" alt="Video thumbnail"> </a>
Replace YOUR-EMBED-URL and YOUR-IMAGE-URL with the values from steps 2 and 3. Adjust the 400 and 225 to suit your layout, keeping the ratio the same as your thumbnail.
Do not use the standard Image block for this. The Image block has its own Lightbox toggle in the block settings, but that is a different WordPress feature that only enlarges the image itself. It cannot open a linked video. The Image block also applies any CSS class you add to the outer wrapper rather than to the link, so the fancybox-iframe class does not land where the plugin needs it. Writing the HTML directly avoids both problems.
Repeat this for each video you want on the page.
Step 5: Handle mobile
Because width and height are fixed percentages of the browser window, a setting that looks right on a wide desktop screen will leave large empty bars above and below the video on a phone, where the window is tall and narrow.
The simplest fix is to turn the lightbox off on small screens, so tapping the thumbnail opens the video directly instead. On a phone that fills the screen anyway, which is usually the better experience.
Expand FancyBox Classic: Miscellaneous and change Minimum viewport width from 320 to your chosen cutoff. 768 disables the lightbox on phones while keeping it on tablets and desktop.
When testing this, refresh the page. The plugin decides whether to activate when the page loads. Resizing the browser window across the threshold, or rotating a phone, will not change anything until the page is reloaded. This catches a lot of people out and makes the setting look broken when it is working correctly.
Troubleshooting
Clicking the thumbnail just opens the video URL instead of an overlay.
Check that Enable for iFrames is ticked under FancyBox Classic: Enable. If it is, right click the image on your live page, choose Inspect, and look at the <a> tag. The class fancybox-iframe needs to be on the link itself. If it is on a <figure> or a <div> around it, your page builder has moved it. Rebuild that element as raw HTML.
The overlay opens but shows the full watch page.
You have used the share link rather than the embed URL. Go back to step 2.
The overlay is blank, or the page loads in the main browser tab instead.
Check the video is not set to Private, and check whether the video has embed domain restrictions applied that exclude the site you are embedding on.
Large empty bars above and below the video.
The overlay is a different shape to the video. Adjust Height under FancyBox Classic: iFrames. On mobile, use the Minimum viewport width setting instead, as covered in step 5.
The fullscreen button does nothing.
Tick Allow fullscreen under FancyBox Classic: iFrames.
Changes to settings appear to have no effect.
Reload the page rather than resizing the window. If your site uses a caching plugin, clear the cache and try again.
Still stuck? Email support@livid.com. Bear in mind that the lightbox plugin is not our software, so for questions about the plugin's own behaviour, the Firelight Lightbox support forum will get you a better answer than we can.