1. Home
  2. Docs
  3. Content Elements
  4. Video Gallery

Video Gallery EA Element

Video Gallery EA widget allows showcasing YouTube, Vimeo & Wistia videos with an innovative optimization technique. With this widget, you can add a number of videos to the page without sacrificing page speed. Here in this tutorial, you’re going to learn how to use the Video Gallery element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Video Gallery Element

 

»Content

 

Video Gallery

⇒Thumb Layout: Select the thumbnail layout of the video gallery. Choose either horizontal or vertical.

Adding the Items:

⇒Source:

→Video-Type: Select the video type for the videos in the video gallery. You can select either remote video or local video. If you select the remote video, then add the link. And if you select a local video, then upload your video manually.

→Video Source: Add a video URL or link for the video source.

⇒Description:

→Title and Description: Add the title and description of the video.

⇒Poster:

→Poster: Upload an image for the video poster.

 

⇒Add Item: Use the ‘+Add Item’ button to add more videos to the gallery.

 

Video

⇒Title: Enable/disable the title on the video.

⇒Description: Enable/disable the description of the video.

 

Thumbnail

⇒Thumbnail: Enable/Disable the thumbnail image for the videos in the gallery.

⇒Title: Enable/disable the title of the thumbnail videos.

⇒Description: Enable/disable the description of the thumbnail videos.

 

Additional

: Enable/disable the play button on the hover.

⇒Play when Navigate: Enable/disable the play when navigate.

 


»Style

Video Title

⇒Text Color: Add a custom color to the active video title in the gallery.

⇒Text-Shadow: Customize the text-shadow color, set the horizontal and vertical value of the shadow, and control the blur radius.

⇒Typography: Set the typography options for the video title.

 

Video Description

⇒Text Color: Add a custom color to the active video description in the gallery.

⇒Space: Generate some custom space between title and description of the active video on the gallery.

⇒Typography: Set the typography options for the video description.

 

Thumb Item

⇒Background: Add a custom color to the thumb item’s background for both normal, hover and active view on the gallery

⇒Padding: Set the padding value for the top, right, bottom and left around the video thumb item for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the video thumb item for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the video thumb items for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the video thumb item’s border for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the video thumb item for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Thumbnail

⇒Width (px): Customize the width of the thumbnail of the video gallery.

⇒Margin: Set the margin value for the top, right, bottom and left around the video thumbnail for different dimensions. You can link the values together or customize them individually.

⇒Padding: Set the padding value for the top, right, bottom and left around the video thumbnail for different dimensions. You can link the values together or customize them individually.

⇒Opacity: Customize the opacity of the video thumbnail manually for both normal and hover view.

⇒CSS Filters: Customize the CSS filters for the thumbnail of the video gallery. Edit the blur, brightness, contrast, saturation, and hue of the thumbnail.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the video thumbnail for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the video thumbnails border for both normal and hover view.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the video thumbnails for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Thumbnail Title

⇒Text Color: Add a custom color to the thumbnail titles in the gallery.

⇒Text Hover Color: Add a custom text hover color to the thumbnail titles in the gallery.

⇒Typography: Set the typography options for the thumbnail titles.

 

Thumbnail Description

⇒Text Color: Add a custom color to the thumbnail descriptions in the gallery.

⇒Text Hover Color: Add a custom text hover color to the thumbnail descriptions in the gallery.

⇒Typography: Set the typography options for the thumbnail descriptions.

⇒Space: Generate some custom space between title and description of the thumbnails.

 

Play/Pause Button

⇒Icon Color: Add a custom color to the play/pause button for both normal and hover mode.

⇒Background: Add a custom background color to the play/pause button for both normal and hover mode.

⇒Size (px): Customize the play/pause button size for different dimensions.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the play/pause button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the play/pause button.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the play/pause button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Video Gallery Element.


Was this article helpful to you? Yes No

How can we help?