FLASH SALE Get the All Themes Package for only $99 View Details →

Knowledge Base

Documentation

Theme Documentation



Plugin Documentation



Resources

Inspiro – Setting Up the Video Lightbox in Portfolio

This article refers to Inspiro Premium

The Video Lightbox is a premium feature in Inspiro, allowing you to display a self-hosted or YouTube/Vimeo video in a lightbox gallery when clicking the play icon on portfolio items. Unlike the video background feature, which has limitations on certain devices, the video lightbox works across all devices.

  1. Adding a Video to the Video Lightbox Section
  2. Enabling the Video Lightbox in the Portfolio Page or Section
  3. Enabling the Video Lightbox in the Single Portfolio Post Header

1. Adding a Video to the Video Lightbox Section

When creating a new portfolio post or editing an existing one:

1. Navigate to Portfolio → Add New (or edit an existing portfolio post).
2. Scroll to the Video Settings section and click on the Video Lightbox tab.

3. Choose one of the following video sources:

Upload an MP4 video or insert a direct link to a hosted video file.

💡 Recommended Video Settings for Self-Hosted Videos:

  • Keep file size small (5-20MB) for fast loading on mobile data connections.
  • Format: MP4 with H.264 encoding (Use Handbrake for resizing/conversion).

Paste a public URL of a YouTube or Vimeo video.

Examples of valid video URLs:

✅ Vimeo: https://vimeo.com/295116835
✅ YouTube: https://www.youtube.com/watch?v=uvNw15W_EK8

Note: Shortened URLs or URLs with additional query parameters may not work.

❌ https://www.youtube.com/watch?v=tXxpsKog2FU&t=287s&ab_channel=WPZOOM
❌ https://youtu.be/tXxpsKog2FU?si=8sSHwn4FREu1fB_h

2. Enabling the Video Lightbox in the Portfolio Page or Section

For setting up a portfolio page/section, see: How to Add a Portfolio Page or Section.

The Video Lightbox feature needs to be enabled in your portfolio page or section. The process depends on the method used to create the portfolio:

Enabling Video Lightbox in Elementor

1. Edit your portfolio page with Elementor.

2. Click on the Portfolio Showcase widget.

3. In the widget settings panel, locate the Enable Lightbox option in the Posts Settings section and turn it on.

4. Click Update to save changes.

Enabling Video Lightbox in the Block Editor

1. Edit the portfolio page (or the portfolio layout) in the Block Editor.

2. Click on the Portfolio block to access settings.

3. In the right sidebar settings panel, enable Video Lightbox from the Other Settings section.

4. Click Update to apply changes.

Enabling Video Lightbox for Page Template-Based Portfolio

If you’re using the method to create a portfolio page or section with a built-in page template, here is how you can enable the Video Lightbox in this case:

  1. Navigate to WPZOOM → Theme Options → Portfolio Options.
  2. Locate the Portfolio Page section.
  3. Checkmark the Enable Lightbox option.
  4. Click Save All Changes.

3. Enabling the Video Lightbox in the Single Portfolio Post Header

You can also display the Video Lightbox in the header of a single portfolio post, creating a fullscreen playable video effect.

How to Enable:

  1. Go to WPZOOM → Theme Options → Portfolio Options → Single Portfolio Posts.
  2. Enable Fullscreen Header.
  3. Check Enable Video Lightbox.
  4. Click Save All Changes.

This is how the video lightbox will be displayed in the single portfolio post header:

Last updated on April 9, 2025