How To Use The Video Gallery Widget By Atomic Addons

The Video Gallery widget by Atomic Addons shows a large video player with a playlist next to it. Visitors pick a video from the playlist or slide through them, and click the play button to watch. The videos can come from YouTube, Vimeo, Wistia or Dailymotion, from a link to a video file, or from your Media Library. This guide covers adding the widget, building the playlist and choosing what the player and the playlist show.

Enable the Video Gallery Widget

Video Gallery is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Video Gallery. You can also open the Creative category.

4. 4

   Turn the Video Gallery widget on.

5. 5

   Click Save Settings.

Add the Video Gallery Widget

Video Gallery works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Video Gallery. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

A new widget comes with seven sample videos, so you can see the layout at once. Replace or delete them in the Video Playlist section.

Video Playlist

Open the widget and go to Content → Video Playlist. Thumb Layout sets where the playlist sits: Horizontal, the default, puts it in a strip under the player; Vertical puts it in a column to the right of the player. Below it is the list of videos. Click a video to open it; its settings are split over three tabs:

1. 1

   Source → Video Type: Remote Video (the default) plays a video from a link; Local Video plays a file from your Media Library.

2. 2

   Source → Video Source: With Remote Video: paste the video's address. The widget plays YouTube, Vimeo, Wistia and Dailymotion links, and direct links to .mp4, .webm and .ogv files. With Local Video: choose or upload the video file instead.

3. 3

   Description → Title and Description: The video's title in the first field and a short description in the box under it. Both show on the player and in the playlist.

4. 4

   Poster → Poster: The picture shown on the player and as the playlist thumbnail before the video plays. For a YouTube video you can leave it empty: the widget uses the video's own thumbnail. Other videos without a poster show a dark frame.

Drag the videos in the list to change their order. Use + Add Item for another video.

Video

Content → Video sets the text over the player, in the corner of the current video:

1. 1

   Title: Shows the video's title. On by default.

2. 2

   Title HTML Tag: The title's markup: H1 to H6, div, span or p. H2 by default.

3. 3

   Description: Shows the video's description under the title. On by default.

Playlist

Content → Playlist sets what each playlist row shows:

1. 1

   Thumbnail: The poster as a small picture. On by default.

2. 2

   Title: The video's title. On by default.

3. 3

   Title HTML Tag: The title's markup, H4 by default.

4. 4

   Description: The video's description, under the title. On by default.

Turn all three off to hide the playlist: the player then takes the full width, and visitors move between videos by swiping.

Additional Options

Content → Additional Options holds four switches, all off by default:

1. 1

   Play Button on Hover: Hides the play button until the visitor points at the player.

2. 2

   Play when Navigate: Off, picking another video in the playlist stops the one that is playing. On, it keeps playing.

3. 3

   Show Arrows Always?: The arrows that scroll the playlist appear only while the pointer is over it. Turn this on to show them all the time.

4. 4

   Hide Close Button: While a video plays, a close button in its corner stops it and shows the poster again. Turn this on to hide that button.

Style the Video Gallery

Everything below is on the Style tab. Sections for parts you switched off are hidden.

• Caption — the background and padding of the title and description box on the player.
• Video Title and Video Description — text color, background and typography; the description also has Space above it.
• Poster — Position and Size (Auto, Cover or Contain) of the poster on the player.
• Playlist — the rows: background, padding, margin and radius, with Hover and Active states for the row of the current video.
• Thumbnail — width, margin, padding, radius and opacity of the small pictures, with a Hover opacity and a transition time.
• Thumbnail Title and Thumbnail Description — text color, hover color and typography.
• Play/Pause Button — icon color, background, size, border, radius and shadow, with a Hover state.