How I use SmartVideo in a lightbox?

There are two ways to use SmartVideo inside a WordPress lightbox:

1. Optimize an existing HTML5 video from your WordPress Media Library (Growth or Pro).
2. Put a SmartVideo tag inside the lightbox’s inline HTML content (including on Startup).

First, install and configure the SmartVideo WordPress plugin with your Swarm CDN Key. Make sure Disable SmartVideo on this page is not checked for the page that contains the lightbox. If your lightbox plugin creates the video when it opens (Option 1), open SmartVideo in your WordPress admin sidebar, go to the Settings tab, and set Conditional script loading to Off. Standard and Strict use server-side content and builder scans to decide whether to load the player script. A video inserted only when the lightbox opens may not be detected, so use Off for this setup.

Option 1: Optimize a WordPress Media Library video

Use this option if your lightbox inserts an HTML5 <video> element with an MP4 source. A link to an MP4 alone is not enough: the lightbox must create the video element on the page.

1. Choose a video from your WordPress Media Library, or an MP4 URL that returns the video file without a login or cookies.
2. Open SmartVideo in your WordPress admin sidebar, go to the Settings tab, and turn on Background & HTML5 videos under Auto-conversions. This setting is marked Growth and is a Growth/Pro feature. If you’re on Startup, use Option 2 instead. Older plugin versions labelled this setting Optimize background videos & existing videos.
3. Configure your lightbox to display that video using its own documentation, then test the published page.

SmartVideo accelerates delivery of the lightbox’s own HTML5 video; the lightbox keeps its native controls. Replace YouTube & Vimeo embeds is a separate setting, not the setting for Media Library videos. Older plugin versions called it Auto-convert YouTube & Vimeo videos.

Option 2: Use a SmartVideo tag in HTML

Use a lightbox that supports inline HTML content. Fancybox documents the hidden-container pattern below for generic inline HTML. SmartVideo also scans hidden containers, so its player can initialize before the lightbox opens. Make sure Fancybox is installed and initialized on your site before adding this markup:

<button data-fancybox data-src="#smartvideo-lightbox">Watch video</button>

<div id="smartvideo-lightbox" style="display:none;">
  <smartvideo src="https://your-video.example.com/file.mp4"
              width="640" height="360" controls></smartvideo>
</div>

Replace the example source with your video’s URL. An external URL must return the video file without a login or cookies. Alternatively, upload to the SmartVideo Library and use the swarmify:// source reference copied from the video’s Media Details page. A Library reference belongs in the SmartVideo tag, not in a lightbox field that expects a direct MP4 URL.

The ID belongs on the outer container, so the lightbox targets that container rather than the SmartVideo tag that the player replaces. Each lightbox container needs a unique ID.

Tip: Keep width and height on the SmartVideo tag, as in the example. The player sizes itself from them before it first appears.

SmartVideo scans the page for <smartvideo> tags and rescans when elements are added, so hiding a tag does not defer player initialization. The example does not set an autoplay attribute. After adding the markup, run the checks in Test your lightbox below.

Test your lightbox

On the published page, open the lightbox, start playback, close it while playing, and reopen it. Check the player size, controls, and whether audio continues after closing.

If you need help, contact support with the page URL, the lightbox plugin’s name, and what happens when you open or close it.

Example

Here’s a SmartVideo player in a Fancybox lightbox (recorded with an earlier player design).