Self-hosted HTML5 Video, YouTube, Vimeo and Wistia.Covering all the possible ways video can be displayed with Essential Grid.
1. Setting Video ID's / URL's
In order to use Video with Essential Grid, you first have to add your video ID’s and/or URL’s. All that’s needed for YouTube, Vimeo or Wistia is the video’s individual ID, and an absolute url is required for self-hosted HTML5 Video.
1.1 Find your video's ID / URL.
ID’s for YouTube, Vimeo and Wistia can be found in their respective video links:
YouTube ID = eVo3LbVWjWc
Vimeo ID = 118046336
Wistia ID = 479268413a
For self-hosted HTML5 Video, upload an “mp4” version of your video to your website using your favorite ftp program, and then locate the absolute url to the video on your site:
HTML5 Video URL Example:
1.2 Enter your video's ID/URL.
Where you enter your video’s ID/URL will depend on whether you’re using a post-based grid or a Custom Grid.
For a post-based grid, inside the post-editor, scroll to the “Essential Grid Custom Settings” section, and enter your video’s ID or url inside the “Alternative Sources” section:
For a Custom Grid, inside the “Sources” section of your grid, scroll to the “Add Items” section, and select the video type you wish to add:
2. Play Video inside Grid Item
Video can be played directly inside a grid item. Visit the following demos to see examples of this.
In the above examples, you’ll notice that all items have an image along with with a fancy hover skin that includes a “play” button/icon for the video.
This special hover-skin will only be shown if a “video poster image” has been added to the grid item, which can be a custom or designated “default” image of your choosing. Or, it can be the poster loaded directly from YouTube/Vimeo.com
To get started, from your Grid's "Source" section, select the video sources you will be displaying inside your Grid Items.
Next, assign a poster image for your video source(s).
Quick Tip #1
Quick Tip #2
To add a custom preview/poster image for a post-based grid, first select one of the three options shown in the screenshot below, and then review #1-3 here for how these images can be officially attached to the Grid item.
To add a custom preview/poster image for a Custom Grid item, select “Featured Image” for the video poster source.
And then to add the poster images, scroll to the “Editor / Preview” section, click “Edit Element”, and then “Choose Image”.
Finally, visit the Skins tab, and select one of the following pre-built video skins:
- Herbet Hoover
The three skins listed above include a video play button/icon by default, but we can modify any of the additional skins to play video inside the grid item as well:
1. Select a Skin for your grid:
2. Edit the Skin:
3. Select the element, and change the icon:
4. Choose one of the "play" button icons:
5. Set the icon element's link to "Play Embedded Video":
3. Play Video Inside Lightbox
The process for setting up video to play inside the lightbox is very similar to playing video inside the grid item itself, in that both a video ID/url and also an image will need to be added to the grid item.
Setting up video ID’s/urls’s and images for grid items will vary based on whether you’re using a Post-based Grid or a Custom Grid. Review the previous sections in this article for information about both processes.
Once you’ve setup your grid items to include both a video ID/url and also an image, follow the steps listed below to load the video inside the lightbox:
3.1 Set main media source to one of the "image" options.
For a post-based grid, you can choose one of the three options listed in the screenshot below.
For a Custom Grid, always choose “Featured Image” (#1 below).
3.2 From the "lightbox" section, select the video sources you're working with.
3.3 Choose a skin
Most skins include a magnifying glass icon, that’s automatically connected to the lightbox by default.
To change the icon from a magnifying glass to a play button, follow steps #1-4 here. Then for step #5, set the “Link To” option to “Lightbox”:
4. Play Video Inside Ajax Container
Essential Grid has a special feature where content can be loaded dynamically above or below the grid. To illustrate this, here’s a view of a sample grid:
And here’s the same grid with a video loaded as the Ajax content: