pda-add-elementor-video-gallery-wordpress

How to Add an Elementor Video Gallery to WordPress

The importance of videos on every WordPress website is undeniable. Besides serving marketing purposes, they help increase your traffic and grab user retention.

The common way to display videos on your site is by listing them one by one on a page. However, this may destroy your page appearance when it comes to presenting 3 or 4 videos at a time. The movie maker will have to be very efficient to make this work for your website.

It’s recommended to put videos into a collection which is called a gallery. If you’re using the classic editor, you must use a plugin to build a WordPress video gallery. For sites built by Elementor, the process becomes much easier.

Today, we’ll show you how to create an Elementor video gallery in 2 ways, using its video widget and Element Pack add-on. The method to fix the video widget not working is also brought forward. Lately, let’s wrap our post with the bonus guide on how to add background videos with Elementor.

How to Create an Video Gallery Using Elementor Video Widget

Elementor comes with numerous widgets for you to build an eye-catching custom WordPress site. They include the heading, image, text editor, button, and icon widgets, etc.

With just some styling and adjustments, you can still use its basic video widget to still design a video gallery. Here is the step-by-step instruction on how to achieve that.

First, head to Pages in your WordPress admin dashboard and add a new one. You need to provide the page title and set the page template to Elementor Canvas in the Page Attributes section. Now press the Edit with Elementor button to switch to the Elementor page builder.

Rather than creating a new page, you can open an existing one and start editing it.

pda-add-new-page-elementor

The next step is to design the gallery structure by clicking on the plus icon and selecting one for your page. In this tutorial, we’re going to choose a four-column structure.

pda-choose-elementor-page-structure

It’s time for you to add videos to the gallery format you’ve just created. Simply drag and drop video widgets from the Elementor Elements section on your left hand.

pda-drag-drop-elementor-video-widget

Click on the pencil icon of each video widget in the gallery and add your video there. You’re required to enter your video URL in the Link field. There are various setting options to edit the video. You can enable the autoplay feature, keep it in the mute status, or show the player controls.

Open the Style and Advanced tabs to customize your video appearance.

 pda-edit-elementor-video-widget

Repeat the process with the rest of the videos in your gallery. Preview and publish your page then you’re done.

Build Elementor Video Gallery Using JetBlog Add-on

If you want to create a video playlist in Elementor with the JetBlog plugin, here are quick instructions.

  1. Download and activate the JetBlog Elementor plugin.
  2. After creating the page in the Elementor editor, go to “Edit with Elementor” and find the JetBlog Video Playlist widget.
  3. Drag-n-drop the widget to the page section where you want to add a video playlist.
  4. Add as many video links as you wish to have on your playlist.
  5. Customize settings and styling, and you are done.

Feel free to follow the video tutorial for a better understanding.

Build Elementor Video Gallery Using Element Pack Add-on

You can just generate a simple video gallery with the Elementor video widget. However, if you long for a good-looking gallery with different thumb layouts, go for the Element Pack add-on.

Similar to the method above, you have to create a new page or edit an existing one with the Elementor page builder. Then, follow the guide below on how to use this add-on to customize your gallery.

  1. Find the “Video Gallery” widget in the Elementor Elements section then drag and drop it to your page
    pda-elementor-video-gallery-widget
  2. Decide the thumb layout as vertical or horizontal. The Vertical presents a featured video along with other ones on its right site, arranging from top to bottom. The Horizontal displays the main video in the center and the rest at the bottom of that video.
    pda-video-gallery-thumb-layout
  3. Enter your video URL to the Video Source field. Select the right source field for your video. You have multiple options to choose from such as YouTube, Vimeo, Wistia, Dailymotion, and more.
    pda-elementor-video-source-field
  4. Fill in the video title, description, and poster, etc.

You’re also able to customize your gallery by enabling or disabling the title and description of each video.

pda-enable-video-title

You can refer to this tutorial video on how to create a video gallery with Elementor Pack to better visualize the steps.

Fix Elementor Video Widget Not Working

Elementor, by default, enables your videos to play automatically when the page is loaded. This feature applies to any video sources, from self-hosted videos to those from YouTube or Vimeo.

There may be times when the autoplay function of the WordPress video widget does not work after you load the page. To troubleshoot the issue, you have two solutions, either disabling the Image Overlay option or enabling the Mute option.

Once you turn on the image overlay, Elementor will create a thumbnail image for your video which may disable the autoplay feature. To change this, you need to click on your video block, then open the Content tab → Image OverlayHide.

pda-disable-image-overlay and pda-enable-mute-video

Google Chrome will play your video automatically only when it’s in mute mode. To achieve this, all you need to do include going to ContentView OptionsMute. Please notice that you have to mute your video even though it doesn’t have sound or audio.

Adding Video Galleries to Elementor Made Simple

It’s easy to create a video gallery with the Elementor page builder. You can either use its built-in video widget or install the Element Pack add-on.

The first solution helps add a simple gallery by dividing your page layout into columns. Element Pack add-on, on the other hand, allows you to customize the gallery appearance. You can arrange videos, display titles and descriptions on them, and more.

We’ve shown you the method to solve the Elementor video widget not working issue. It just takes you a few clicks to have your videos play automatically on the website.

What’s your experience in creating the Elementor video gallery? Share with us in the comment section below.