Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

Videos Addon

Share This Post!

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 YouTube, Vimeo, Wistia and self-hosted videos for your gallery. In this tutorial we’ll show you how to create a video gallery using Envira’s Videos Addon.


Requirements

Installation

Before you begin, you’ll need to activate Envira’s Videos Addon.

If you need help, please follow our instructions on how to install and activate addons.

Setup

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

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

Videos Addon – Videos Tab

You can configure how your videos function in the new Videos tab when editing your gallery.

As shown above, you’ll see a Videos Tab in your gallery’s edit screen. Let’s review each of the option below.

  • 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.
  • Autoplay Videos? – Automatically begins playback of videos when they are displayed in the Lightbox view.
  • Force Larger Videos? – Enlarge videos to full screen instead of original size. This setting will only be applied to YouTube and Wistia videos.
  • Show Play/Pause Controls? – Display play and pause controls on videos in the Lightbox view. This setting will only be applied to YouTube, Wistia and self hosted videos.
  • Show Progress Bar? – Display the progress bar on videos in the Lightbox view. This will only be applied to Wistia and self hosted videos.
  • Show Current Time? – Display the current playback time on videos in the Lightbox view. This setting will only be used for self hosted videos.
  • Show Video Length? – Display the video length on videos in the Lightbox view. This setting will also only be used for self hosted videos.
  • Enable Volume Controls? – Display the volume controls on videos in the Lightbox view. This will only be applied to Wistia and self hosted videos.

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

Choose the Select Files From Other Sources button to begin adding videos to your gallery using the Envira Videos Addon.

First, select a gallery to edit or create a new gallery by clicking Add New. Next, click 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.

Click Insert Video from the left menu and Add Video from the top right to begin adding your videos.

  • 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.

Add the Title, Video URL, Caption and Alt you want to use for each video.

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 Images Tab. Envira will get the poster image from each YouTube, Vimeo and Wistia video and then add that image to your WordPress Media Library.

Once you've added videos to your gallery you'll see their auto-generated thumbnails appear in the Images tab.

If the poster image is changed, you’ll need to remove the video from the gallery and re-insert it so Envira can create the new image.

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.

Now, when the image is clicked the lightbox will open showing the video in the lightbox.

Videos will play in lightbox view when visiting the gallery you've added videos to.


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

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.


FAQs

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


Configuration Options

Here are the available configuration options for your video gallery when using this addon.

The Programmatic Name and Programmatic Values columns are used when configuring the Videos Addon shortcode, template tag or when overriding the default settings for creating a new gallery.

Config Item Description Options Programmatic Name Programmatic Values
Autoplay Videos? (All): Automatically begins playback of videos when they are displayed in the Lightbox view. Enabled/Disabled videos_autoplay 1,0
Show Play/Pause Controls? (YouTube, Wistia, Self Hosted): Display play and pause controls on videos in the Lightbox view. Enabled/Disabled videos_playpause 1,0
Show Progress Bar? (Wistia, Self Hosted): Display the progress bar on videos in the Lightbox view. Enabled/Disabled videos_progress 1,0
Show Current Time? (Self Hosted): Display the current playback time on videos in the Lightbox view. Enabled/Disabled videos_current 1,0
Show Video Length? (Self Hosted): Display the video length on videos in the Lightbox view. Enabled/Disabled videos_duration 1,0
Enable Volume Controls? (Wistia, Self Hosted): Display the volume controls on videos in the Lightbox view. Enabled/Disabled videos_volume 1,0

Changelog

1.2.9.2 (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-

    1.0.2

    • Fix: Supersize Addon compatibility

    1.0.1

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

    1.0.0

    • Initial release of the addon.
    Share This Post!