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.

Currently Envira supports self hosted videos (mp4), YouTube videos (playlists from your account and specific start times), Vimeo videos, Instagram videos, Facebook videos, Twitch videos, VideoPress videos and Daily Motion videos.

If you’re going to be using the YouTube playlist for your video galleries, you’ll need to get a YouTube API and enter it in Envira Gallery » Settings » Video tab.

Get the YouTube API in order to create a gallery of YouTube playlists

To do this, please follow our help guide on getting and saving a YouTube API.

If you’re not going to use the playlist functionality, you can skip this step.

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

Your first step is to create a new gallery or edit an existing one. You can follow along with our documentation for creating your first gallery.

You can add videos to your gallery in two different ways. Below we’ll run through each possible way.

Insert video link directly

To add videos directly, click the Insert Files from Other Sources button and from the menu on the left of the pop up window, select Insert Videos.

You’ll then see a button to Add Video, click this to being adding videos to your gallery.

You can see from the examples on the left the accepted URL formats for your video links. Click the X icon to close this window when you’ve added all your videos to the gallery.

As you insert your videos, Envira will go out and get the poster image for each video and insert this into the gallery but also into your WordPress Media Library.

Once you’ve added the videos, you do also have the option of editing each of the videos to choose if you would like to show your video from the gallery view.

To do this, click the blue pencil icon to edit the first video. The Edit Metadata window will open and you can choose to display the video in the gallery view by clicking the box for Display Video in Gallery?

display the video in gallery

Specify video link on gallery image

Alternatively, you can just add images to your gallery as you would any other gallery.

Then clicking the blue pencil icon to edit the image, just change the URL field to point to the video URL.

Copy and paste the video URL into the Envira metadata field and save the change

Click the Save Metadata button to save the changes and using the right and left arrows keys in the top right, navigate through the remaining gallery images to update any other URLs.

When you’re all done, click the X icon to close the Edit Metadata window.

Your next step is to set up your video options on the Video tab.

Click on the Video tab to set up your video options

Finally, click Publish or Update on your gallery to save the changes.

See the demo!

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

Also you’ll need to make sure the permissions on the video for the Read access is World.

Check the permissions on your Amazon S3 video

We have a demo to view.


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.


A: Unfortunately we don’t currently have the permissions in the API to stop the related videos from showing at this time.


Changelog

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

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.