Black Friday Sale

Upto 40% OFF

Discount Auto Applied

Video Gallery

This is a super useful element for showing videos from different sources all at once. It can handle videos from YouTube, Wistia, Vimeo, and even ones you host yourself. It’s great because you can mix and match videos from various sources. It’s super handy because it lets you use different types of video playlists, like your own videos, YouTube playlists, or YouTube channels.

What makes it even cooler is that you can organize your videos into categories. So, if you have different kinds of videos, people can easily find what they’re looking for. And guess what? There’s a special feature that makes the videos pop up in a big window when you click on them, making it even more fun for people to watch.

The Video Gallery element features the following controls.

Content

General

  • Layout: Choose a layout from Grid or Carousel.
  • Source: Select source from Custom List, YouTube Playlist ID, or YouTube Channel ID Videos.

YouTube Channel ID / YouTube Playlist ID

  • Channel ID: Enter the channel ID of YouTube (applicable for YouTube Channel ID).
  • Playlist ID: Enter the playlist ID of YouTube(applicable for YouTube Playlist ID)
  • Number Of Videos: Enter the number of videos you want to display.
  • Video Order: Enable the option to order the videos(applicable for YouTube Channel ID)
  • Video Title Enable: Activate the option to display the video title.
Video Gallery: General Settings
Video Gallery: General Settings

Note: To utilize the YouTube playlist and YouTube channel video sources, you must enter the YouTube API key you generated earlier. You can find the path to enter the API key by clicking on the “Settings” option within the relevant section.

Please check our detailed doc on “How to Generate YouTube API Key

Custom List

  • Title: Enter the title.
  • Video Platform: Choose from YouTube, Vimeo, Wistia, or Self-Hosted.
    • Link: Enter the video link.
    • External URL:  If you have an external URL of the video, you can enable this option(applicable for Self hosted)
      • URL: Insert a URL of the video
    • Choose File: Upload the video(applicable for Self hosted)
    • Details: Enable the option to display video details.
      • Title: Enter the title of video.
      • Description: Enter the description of video.
Video Gallery: General Settings(Custom List)
Video Gallery: General Settings(Custom List)
  • Filter Category: Enter the name of the category for a particular video.
  • Thumbnail Size: Specify the thumbnail size.
  • Custom Thumbnail: Enable the option to set the custom thumbnail.
    • Choose Image: Upload an image for a thumbnail.
  • Start Time: Set the start time of the video(applicable for YouTube, Self hosted, and Vimeo)
  • End Time: Set the end time of the video(applicable for YouTube and Self hosted)
  • Video Schema: Enable the option to set schema for video.
Video Gallery: General Settings(CustomList)
Video Gallery: General Settings(CustomList)
  • Cache Timeout: Select the option for timeout.
  • Enable Filter: Enable to show filters(applicable for Grid Layout and Custom List).
  • Enable Lightbox: Enable it to open video in Lightbox.
Video Gallery: General Settings
Video Gallery: General Settings

Layout

  • Columns: Specify the number of columns(applicable for Grid Layout type).
  • Column Gap: Specify the gap between columns(applicable for Grid Layout type).
  • Row Gap: Specify the gap between rows(applicable for Grid Layout type).
  • Aspect Ratio: Set the aspect ratio of videos.
  • Details Layout: Choose the specific time at which you would like to showcase your video information.
Video Gallery: Layout Settings
Video Gallery: Layout Settings

Play Button

  • Icon Type: Choose from a list of Icons, Images, or Lottie animations.
  • Icon
    • Icon: Select from the Font Awesome icon library or upload an SVG image.
  • Image
    • Image: Either upload an image or select a dynamic tag for display.
  • Lottie Animation
    • Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
    • Loop: Enable the loop option to display the animation continuously.
    • Reverse: Activate the reverse option to display the animation in reverse order
Video Gallery: Play Button Settings
Video Gallery: Play Button Settings

Styling

  • Button Size: Specify the size of button.
  • Rotate: Specify the rotate properties.
  • Color: Select the icon color.
  • Background: Select the background color of icon.
  • Border: Set the border.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
Video Gallery: Play Button Style Settings
Video Gallery: Play Button Style Settings

Lightbox

Note: This option is applicable when Lightbox is enabled in the General section.

  • Loop: Enable the option to display posts in a loop upon the lightbox.
  • Speed: Set the speed.
  • Slide Delay: Specify the value to delay the slide.
  • Full Screen: Activate the option to display lightbox in fullscreen.
  • Zoom: Enable the option to show lighbox in zoom mode upon page load.
  • Counter: Enable the option to display counter.
  • Download: Activate the option to enable download.
  • Media Overlap: Activate the option to enable the overlap.
  • Close On Tap: Enable the option to close the gallery while tap on black area.
  • Esc Key: Enable the option to close the LightGallery by pressing the “Esc” key.
  • Hide Gallery Controls: Enable the option to hide Navigation and Toolbar controls.
    • Delay: Set the hide gallery controls delay duration.
Video Gallery: Lightbox Settings
Video Gallery: Lightbox Settings

Video

  • Autoplay: Enable the option to autoplay the video on slide change.
Video Gallery: Lightbox Settings(Autoplay)
Video Gallery: Lightbox Settings(Autoplay)

Navigation

  • Navigation: Enable the option to display the navigation.
    • Enable Arrows: Activate the option to enable arrows.
    • Enable Drag: Activate the option to enable dragging.
    • Enable Swipe: Activate the option to enable swipe(only for screen touch devices).
    • Keyboard: Activate the option to enable keyboard control.
    • Mouse Wheel: Activate the option to enable mouse wheel feature.
    • Next: Enter the text for navigation next icon.
    • Previous: Enter the text for navigation previous icon.
Video Gallery: Lightbox Settings(Navigation)
Video Gallery: Lightbox Settings(Navigation)

Thumbnail

  • Thumbnail: Enable the option to activate the features.
    • Alignment: Select the alignment of thumbnail.
    • Toggle Thumb: Enable the option if needed(not applicable if Media Overlap is false).
    • Width: Set the width of thumbnail.
    • Height: Set the height of thumbnail.
    • Margin: Set the margin.
Video Gallery: Lightbox Settings(Thumbnail)
Video Gallery: Lightbox Settings(Thumbnail)

Hash URL

Note: Custom Slider Name will work as URL if Hash Url plugin is installed.

  • Hash URL: Enable the option to activate the feature.
    • Custom Slider Name: Enable the option to give a unique name.
      • Gallery ID: Enter the unique id.
Video Gallery: Lightbox Settings(Hash URL)
Video Gallery: Lightbox Settings(Hash URL)

Share

  • Share: Enable the option to display the share buttons.
    • Facebook:
      • Facebook Text: Enter the text for Facebook share.
    • Twitter:
      • Twitter Text: Enter the text for Twitter share.
    • Pinterest:
      • Pinterest Text: Enter the text for Pinterest share.
Video Gallery: Lightbox Settings(Share)
Video Gallery: Lightbox Settings(Share)

Carousel

Note: This option is applicable if Layout is selected as Carousel in General Section.

  • Loop: Enable the option to display posts in loop.
  • Effects: Select the effect from given options.
  • Slide Per View: Specify the number of slides to display per view.
  • Slide Per Group: Specify the number of slides to display per group.
  • Space Between: Specify the space between slides.
  • Speed: Set the speed.
  • Autoplay: Enable the option to play carousel automatically.
    • Pause On Interaction: Activate the option to pause slides on interaction.
    • Duration: Set the duration.
    • Pause On Hover: Activate the option to pause slides on hover.
  • Auto Height: Enable the option if needed.
Video Gallery: Carousel Settings
Video Gallery: Carousel Settings

Pagination

  • Pagination Type: Select the type of pagination from Bullets, Progress Bar, and Fraction.
  • Clickable: Enable the option to make pagination clickable(applicable for Bullets Pagination type).
  • Keyboard Control: Activate the option to enable keyboard control on pagination.
  • Scroll Bar: Enable the option to display scroll bar.
Video Gallery: Carousel Settings(Pagination)
Video Gallery: Carousel Settings(Pagination)

Navigation

  • Navigation:
    • Position: Select either inside or outside.
    • Previous Icon: Select the icon for previous navigation.
    • Next Icon: Select the icon for Next navigation.
    • Horizontal Position: Select the horizontal position of navigation(applicable if position is selected as inside).
    • Vertical Position: Select the horizontal position of navigation(applicable if position is selected as inside).
Video Gallery: Carousel Settings(Navigation)
Video Gallery: Carousel Settings(Navigation)

Carousel Style

Note: This option is applicable if Layout is selected as Carousel in General Section.

Navigation

  • Color: Select the color of navigation icon.
  • Background: Select the background color of navigation icon.
  • Border: Set the border.
  • Box Shadow: Set the box shadow.
  • Size: Specify the size of navigation.
  • Horizontal Offset: Set the horizontal offset properties.
  • Vertical Offset: Set the vertical offset properties.
  • Padding: Set the padding.
Video Gallery: Carousel Style Settings(Navigation)
Video Gallery: Carousel Style Settings(Navigation)

Pagination

  • Size: Specify the size of pagination.
  • Active Color: Select the pagination color in active state.
  • Inactive Color: Select the inactive state pagination color.
  • Top Offset: Specify the top offset properties.
  • Bottom Offset: Specify the bottom offset properties.
Video Gallery: Carousel Style Settings(Pagination)
Video Gallery: Carousel Style Settings(Pagination)

Scrollbar

Note: Only applicable when Scroll bar is enabled in the Carousel section.

  • Size: Specify the size of scrollbar.
  • Drag Color: Select the scrollbar drag color.
  • Color: Select the color of scrollbar.
Video Gallery: Carousel Style Settings(Scrollbar)
Video Gallery: Carousel Style Settings(Scrollbar)

Filter

Note: This option is applicable when Filter is enabled in the General section.

  • Heading: Enter the heading of the filter.
  • Heading HTML Tag: Select the HTML tag for heading.
  • All Category Text: Enter the text of all categories.
  • Collapse Filter: Enable the option to collapse the filter.
    • Collapse After: Specify the number indicating how many items will collapse after it.
    • Dropdown Button Text: Enter the text for the dropdown.
    • Collapse Icon: Select the icon.
    • Stack Devices: Specify the devices on which you want to stack the devices.
Video Gallery: Filter Settings
Video Gallery: Filter Settings

Styling

  • Background: Select the background of video.
  • Border: Set the border.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.

Overlay

  • Overlay: Specify the overlay properties.
Video Gallery: Filter Style Settings
Video Gallery: Filter Style Settings

Video Details

  • Title Typography: Set the typography of title.
  • Description Typography: Set the typography of description.
  • Gap: Specify the gap between content.
  • Background: Select the background of video details.
  • Padding: Set the padding.
Video Gallery: Filter Video Details Style Settings
Video Gallery: Filter Video Details Style Settings

Filter Styling

Note: This option is applicable when Filter is enabled in the General section.

  • Heading Typography: Set the typography of heading.
Video Gallery: Filter Style Settings
Video Gallery: Filter Style Settings

Filter Buttons

  • Button Gap: Specify the gap between buttons.
  • Typography: Set the typography.
Video Gallery: Filter Buttons Style Settings
Video Gallery: Filter Buttons Style Settings

Normal State

  • Color: Select the text color of the filter in normal state.
  • Background: Select the background color of the filter.
  • Border: Set the border.

Active State

  • Color: Select the text color of filter in active state.
  • Background: Select the background color of filter in active state.
  • Border Color: Select the border color.
  • Box Shadow: Set the box shadow.
  • Padding: Set the padding.
Video Gallery: Filter Buttons Style Settings(Normal & Active State)
Video Gallery: Filter Buttons Style Settings(Normal & Active State)

Filter Box

  • Direction: Select the direction of filter.
  • Spacing: Specify the spacing between filters.
  • Background: Select the background color of filters.
  • Border: Set the border.
  • Padding: Set the padding.
  • Margin: Set the margin.
Video Gallery: Filter Box Settings
Video Gallery: Filter Box Settings

Dropdown

  • Icon Gap: Specify the gap of icons.
  • Dropdown Gap(From Top): Specify the dropdown gap.
Video Gallery: Filter Box Settings(Dropdown)
Video Gallery: Filter Box Settings(Dropdown)

YouTube Parameters

  • Related Videos From: Select either the Current Video Channel or Any Random Video.
  • Player Controls: Enable the option to display player controls like play, pause, volume, and more.
  • Mute: Allow the option to mute the video.
  • Modest Branding: Enable the option to disable the YouTube logo from displaying in the control bar.
  • Privacy: Enabling this feature prevents YouTube from storing visitor information on your website until they play the video.
Video Gallery: Youtube Parameters Settings
Video Gallery: YouTube Parameters Settings

Vimeo Parameters

  • Loop: Enable the option to display video continuously.
  • Intro Title: Display the video’s Title.
  • Intro Byline: Display the video’s author’s name.
  • Intro Portrait: Display the author’s profile image.
  • Controls Color: Select the color for video player controls.
Video Gallery: Vimeo Parameters Settings
Video Gallery: Vimeo Parameters Settings

Wistia Parameters

  • Loop: Enable the option to display video continuously.
  • Mute: Allow the option to mute the video.
  • Show Playbar:  Enable the option to display the progress bar of the video.
Video Gallery: Wistia Parameters Settings
Video Gallery: Wistia Parameters Settings

Hosted Parameters

  • Loop: Enable the option to display video continuously.
  • Mute: Allow the option to mute the video.
  • Show Playbar:  Enable the option to display the progress bar of the video.
  • Download Button: Enable the option to display the download button.
Video Gallery: Hosted Parameters Settings
Video Gallery: Hosted Parameters Settings

Check out the Demo page of Video Gallery element.