Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Videos Addon

Would you like to create a video gallery for your site? With Envira Gallery Videos Addon you can easily create a beautiful video gallery. The Videos Addon will accept many different video services for your gallery. In this tutorial we’ll show you how to create a video gallery using Envira’s Videos Addon.



Please follow our instructions on how to install and activate addons.

In this instance, you’ll be activating the Envira Video Addon.


Once the Videos Addon is activated, you can begin adding videos to your gallery.

Here is a complete list of all the video services Envira will support:

  • YouTube – this includes personal playlists from your account and the ability to start a video at a particular min/sec clip from the video
  • Vimeo
  • Instagram
  • Facebook
  • Twitch
  • VideoPress
  • Wistia
  • Daily Motion
  • Self Hosted – videos uploaded to WordPress in the mp4 format
Videos Addon – Videos Tab

You’ll also now have a tab on the gallery edit screen. The Videos Tab will contain settings for your video gallery.

Envira Gallery Videos Addon options

Let’s review each of the option below.

Video Settings
  • Display Play Icon over Gallery Image? – Display a Play Icon over a Gallery Image which is linked to a Video, to make it clear to the user that it is a video. Setting does not apply if an individual image has the “Display Video in Gallery” option enabled.
Video Lightbox Settings
  • Autoplay Videos? – (DailyMotion, Instagram, VideoPress, Vimeo, Wistia, YouTube): Automatically begins playback of videos when they are displayed in the Lightbox view. Please note that not all devices support autoplay on videos.
  • Force Larger Videos? – (Twitch, VideoPress, Vimeo, YouTube, Self Hosted): Enlarge video to full screen instead of original size.
  • Show Video Controls? – (Instagram, Self Hosted): Display the video’s control bar and any controls (regardless of the above settings) in the Lightbox view. The rest of the options shown below will not show to configure unless this option is checked.
  • Show Play/Pause Controls? – (DailyMotion, Wistia, YouTube, Self Hosted): Display play and pause controls on videos in the Lightbox view.
  • Show Progress Bar? – (Wistia, Self Hosted): Display the progress bar on videos in the Lightbox view.
  • Show Current Time? – (Self Hosted): Display the current playback time on videos in the Lightbox view.
  • Show Video Length? – (Self Hosted): Display the video length on videos in the Lightbox view.
  • Enable Volume Controls? – (Instagram, Self Hosted): Display the volume controls on videos in the Lightbox view.
  • Enable Fullscreen? – (Instagram, Self Hosted): Display the fullscreen controls on videos in the Lightbox view.
  • Enable Downloads? – Enable Downloads?

Now it’s time to create our first video gallery using Envira’s Videos Addon.

For the purpose of this example, we are going to be using YouTube and Vimeo videos.

You can add videos to your Envira Gallery in two ways:

  1. Insert from Other Sources
  2. Specifying a Video URL for an Existing Image

Insert from Other Sources

First, select a gallery to edit or create a new gallery by clicking Add New. Next, click the Select Files from Other Sources button.

Create a video gallery by clicking the Select Files from Other Sources button

This will open a popup screen where you can now click the Insert Videos link from the left. Next, click the Add Video button from the top right. This will show you a list of fields you’ll need to complete for your video.

Finally, just complete all the required fields for the video.

Fill in the information for your video to create a video gallery using Envira's Video Addon

  • Title – This sets a title for your video. This can be used to display under the video if you choose to enable this. This is a required field.
  • Video URL – This is where Envira will get the video from. To the right of these fields you’ll see the accepted format for videos. Please make sure to follow these guidelines when entering your video URLs.
  • Caption – This will set a caption for the video.
  • Alt Text – This will set an alt text for the video.

For self hosted videos, you’ll be able to click the Upload Media button to select your mp4 from your WordPress Media Library. That will then show you a 2nd field for you to assign an image for that self hosted video.

Create self hosted video galleries using the Envira Videos Addon

To add more than one video at a time, simply click the Add Video button again to repeat the process for each video you want to add to the gallery.

Once you have set up all the videos you wish, select the Insert into Gallery button to add the video(s) to your gallery.

You’ll see Envira’s auto-generated thumbnails for each video on the Gallery Tab.

Envira will get the poster image from each video service and then add that image to your WordPress Media Library.

Envira will import the videos poster image

If you want to change the thumbnails for the video, simply click the blue pencil icon and update the Video Thumbnail field with the URL to the new image on the Edit Metadata popup.

Remember to click Save Metadata after you’ve made the change and then close the Edit Metadata popup and click Update on the gallery.

Changing the video thumbnail

Specifying a Video URL for an Existing Image

Another way to add videos to your gallery is to manually change the URL of your gallery images so that each image is linked to your video URL.

First, create a new gallery and insert some images into your gallery.

Once your images have been added, just edit the image by clicking the blue pencil icon to enter the Edit Metadata screen.

To edit the metadata for each gallery image select the pencil icon for that image's thumbnail.

You will be adding your video URL to the URL field of the image. Find the URL field in the Edit Metadata screen and update the URL to point to your video and click the Save Metadata button to save the changes.

You can manually change the URL field for any image's metadata to a video URL to load a video in lightbox view.

In addition to your Videos Tab you also have fields that are specific for your videos in the Edit Metadata screen.

  • Is 16:9 Video? – If this video is in 16:9 aspect ratio, check this option to ensure the video displays without black bars in the Lightbox view. This setting will only be applied to self hosted videos.
  • Video Width – For videos that don’t display the dimensions properly, you can set the width here. This setting will only be applied to self hosted videos.
  • Video Height – For videos that don’t display the dimensions properly, you can set the height here. This setting will also only be applied to self hosted videos.
  • Display Video in Gallery? – If this media item’s URL is a self-hosted, Youtube, Vimeo or Wistia video, you can check this option to display the video in the gallery grid, instead of displaying the placeholder image. This setting can be used for all videos in the gallery.
  • Video Thumbnail – If you wish to override auto-generated thumbnails from the video services you’ve selected, upload it here.

With Envira’s Videos Addon it is very easy to set up a video gallery. Have a look below at some further examples.


To demonstrate a couple of the various video galleries you can have, we’ve set up some examples for you.

Video gallery with Lightbox

In this example, the gallery is using YouTube videos with the Autoplay turned on. This means videos will automatically play when the lightbox is opened.

Video gallery without Lightbox

For this next example, we want our videos to play right from the gallery so we’ve enabled the Display Video in Gallery?.

display the video in gallery

That’s all! Now you’re ready to create a fully-featured video gallery on your site. Interested in learning more about creating engaging content for your site? See our guide on how to create a cinemagraph from a video using Photoshop.


Q: Can I remove the black bars above/below my 16:9 videos?

A: Yes! First, edit a gallery and select the pencil icon for the thumbnail image that links to any 16:9 ratio videos in your gallery.

This will open the Edit Metadata screen where you can enable the Is 16:9 Video? option. You can also set the width and height on the self hosted videos (only for self hosted videos)

You can configure special metadata options for individual videos in your gallery.

Q: How can I make videos play in the gallery without the need of a lightbox?

A: First you’ll need to edit your gallery. Select the pencil icon for the thumbnail image that links to any video URL in your gallery.

This will open the Edit Metadata screen where you can enable the Display Video in Gallery? option.

You can configure special metadata options for individual videos in your gallery.

Save the changes and your video will now play in the gallery view instead of opening in lightbox.

Q: Can I use videos from Amazon S3 server?

A: You can currently use videos from Amazon S3 servers. In order for this type of gallery to be displayed correctly, you will need to make sure the Display Play Icon over Gallery Image? is unchecked.

Amazon S3 Video Gallery

Q: Why aren’t my lightbox themes working on the video lightbox?

A: When using videos in your lightbox, Envira will remove borders from the video to give full impact to the videos and therefore you don’t really see a difference from 1 lightbox theme to another when dealing with videos.

Q: Why is my video muted on autoplay?

A: Certain video service providers won’t autoplay the video unless the video is muted. Unfortunately this is not in control of Envira.


1.5.1 (10-16-2018)

  • Added: Add play icon to thumbnails in Lightbox
  • Fix: Stop slideshow w/ YouTube/Vimeo/Self Hosted videos on autoplay start, resume when they end
  • Fix: Resolve conflict with several third-party plugins
  • Fix: Lightbox CSS adjustments for Internet Explorer 11 and self-hosted / Instagram videos
  • Fix: Adjust Lightbox border for Base and Subtle LightBox themes
  • Fix: Reduce 'flash' of some videos in Lightbox when forced larger
  • Fix: Various bug fixes, minor code tweaks, and PHP compatability adjustments

1.5.0 (08-22-2018)

  • Enhancement: Updated video admin UI w/ additional settings.
  • Enhancement: Ability to add YouTube video with timestamp.
  • Enhancement: French translations updated.
  • Added: YouTube Playlist support (requires api key).
  • Added: Instagram Feed support.
  • Added: Instagram IGTV support.
  • Added: Facebook Video support.
  • Added: TwitchTV Video support
  • Added: VideoPress Video support.
  • Added: DailyMotion video support.
  • Fix: Wistia support in Lightbox.
  • Fix: Better support for autoplay for certain videos types.
  • Fix: Replaced Froogaloop and updated API for Vimeo.
  • Fix: Better compataiblity with XTheme.
  • Fix: Minor bug fixes.

1.4.0 (04-10-2018)

  • Added: Fancybox3 support.
  • Fix: Minor bug fixes.

1.3.1 (11-07-2017)

  • Fix: Minor bug fixes

1.3.0 (10-18-2017)

  • Fix: Issue where self-hosted doesn’t display
  • Fix: Minor bug fixes (06-27-2017)

  • Added: You can now use the format as urls: youtube.com/embed/XXXX.
  • Fix: Self hosted videos no longer show horizontal and vertical scroll bars.
  • Fix: Minor bug fixes.

1.2.9 (05-16-2017)

  • Fix: Minor bug fixes.

1.2.8 (02-01-2017)

  • Fix: Minor bug fixes.

1.2.7 (01-19-2017)

  • Fix: Minor bug fixes.

1.2.6 (2016-12-08)

  • Fix css with captioned theme
  • Fix: Cases where youtube and vimeo videos display white screen
  • Fix: CSS loading when videos aren’t used

1.2.5 (2016-11-07)

  • Fix: Wistia Options not properly setting.
  • Fix: Output not filling lightbox.

1.2.4 (2016-11-03)

  • Fix: Pagination addon ( load all in lightbox ).
  • Fix: Various minor bugs.

1.2.3 (2016-10-04)

  • Fix: Conflict causing social buttons outside of lightbox with video addon resolved.

1.2.2 (2016-08-25)

  • Updated: Spanish translations
  • Fix: Conflict causing social buttons outside of lightbox with video addon resolved.
  • 1.2.1 (2016-05-05)

    • Added: Is 16:9 Video option to Edit Metadata when editing an image; allows video to be displayed in 16:9 format without black bars in the Lightbox view.
    • Updated: Standardised edit screen titles and descriptions

    1.2.0 (2016-04-21)

    • Updated: Spanish translation

    1.1.9 (2016-03-31)

    • Added: Documentation and Video Help Links
    • Updated: Moved image editing modal descriptions inline with fields

    1.1.8 (2016-03-10)

    • Updated: Spanish Translations

    1.1.7 (2016-02-25)

    • Added: Option to display play icon over image in gallery
    • Updated: Spanish Translations

    1.1.6 (2016-02-18)

    • Added: Attempt to get self-hosted video width and height to ensure Lightbox maximum dimensions are accurate, and do not cause black banding / scrollbars to display
    • Added: Option to Display Videos in Gallery (videos can be played in line within the Gallery)

    1.1.5 (2016-02-04)

    • Fix: Prevent undefined index on image thumbnail
    • Fix: Generate Lightbox thumbnail, if enabled, when inserting a new video to a gallery. Improves performance ensuring the thumbnail does not need to be generated when viewing the front-end gallery for the first time

    1.1.4 (2016-01-28)

    • Fix: Supersize self-hosted videos displaying scroll bars

    1.1.3 (2015-12-23)

    • Fix: Remove query parameters from Vimeo placeholder images so WordPress can import them correctly
    • Updated: Spanish translations

    1.1.2 (2015-12-17)

    • Added: Standardised return errors as WP_Error for better error reporting

    1.1.1 (2015-12-10)

    • Added: Spanish Translation
    • Added: Inserting self hosted videos now asks for an image placeholder
    • Added: Validatin on inserting videos to prevent errors
    • Fix: Display errors when inserting videos instead of throwing JS error

    1.1.0 (2015-12-03)

    • Added: Compat with Envira Gallery 1.4.0+ new media view / selection tool
    • Fix: Incorrect text domain for some strings

    1.0.4 (2015-11-26)

    • Added: Album Video settings
    • Fix: Gallery in Album Lightbox with Video works

    1.0.3 (2015-07-23)

    • Fix: getimagesizefromstring() compat for PHP 5.3-


    • Fix: Supersize Addon compatibility


    • Fix: Updated Helpful Tips in Metabox to reflect local video support


    • Initial release of the addon.