Video Gallery

This is a versatile and valuable widget that enables the simultaneous display of multiple types of video platforms. With support for popular platforms such as YouTube, Wistia, Vimeo, and even Self-Hosted videos, this widget offers flexibility and convenience.

By providing various sources for video playlists, including custom videos, YouTube playlist IDs, and YouTube channel IDs, the Video Gallery widget caters to different needs and preferences. Additionally, it offers a wide range of customizable options, allowing you to create a unique and visually appealing video gallery.

One of its standout features is the ability to filter videos based on the categories provided, enabling seamless organization and easy navigation for your viewers. Moreover, the widget supports a lightbox feature, further elevating the video viewing experience and capturing your audience’s attention.

The “Video Gallery” widget features the following controls.

Content

General

• Layout: Choose either Grid or Carousel.
• Enable Filter: Enable to show filters(applicable for Grid Layout and Custom List).
• LightBox Enable: Enable it to open video in Lightbox.
• Source: Select source from Custom List, YouTube Playlist, or YouTube Channel Videos.

Custom List

• Videos
  • Video Type: 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 video type).
      • URL: Insert a URL of the video
    • Choose Video: Upload your video(applicable for Self-hosted video type)
    • Video Details: Enable the option to display video details.
      • Title: Enter the video title.
      • Descriptions: Enter the video description.

• Category: Enter the category of the video.
• Thumbnail Size: Select the size from the options available(applicable for YouTube video type)
• Custom Thumbnail: Enable the option to apply a custom thumbnail.
  • Select Image: Upload an image.
  • Image Size: Select the size of the image.

• Start time: Set the start time of the video.
• End Time: Set the end time of the video.
• Loop: Enable the option to play video continuously.
• Related Videos From: Select either the Current Video Channel or Any Random Video(applicable for YouTube Video Type)
• Play Control: Enable the option to display player controls like play, pause, volume, and more(applicable for YouTube and Self-hosted Video Type)
• Mute: Allow the option to mute the video.
• Download Button: Activate the option to enable video downloading(applicable for Self-hosted Video Type)
• Modest Branding: Enable the option to disable the YouTube logo from displaying in the control bar(applicable for YouTube Video Type)
• Privacy Mode: Enabling this feature prevents YouTube from storing visitor information on your website until they play the video(applicable for YouTube Video Type)

• Intro Title: Display the video’s Title(applicable for Vimeo Video Type).
• Intro Portrait: Display the author’s profile image(applicable for Vimeo Video Type).
• Intro Byline: Display the video’s author’s name(applicable for Vimeo Video Type).
• Controls Color: Select the color for video player controls(applicable for Vimeo Video Type).

• Show Playbar: Enable the option to display the progress bar of the video(applicable for Wistia Video Type)
• Video Schema: Enable the option to set schema for video.
  • Video Title: Enter the title of the video.
  • Video Description: Enter the description of the video.
  • Video Thumbnail: Select the thumbnail image for video schema(applicable if the Custom Thumbnail option is not enabled).
  • Video Upload Date & Time: Enter the upload date & time of the video.

Note: To utilize the YouTube playlist and YouTube channel videos sources, you will need to enter the YouTube API key that 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 article on “How to Generate YouTube API Key“

YouTube Playlist

• Playlist Id: Enter your playlist Id.
• Number Of Videos: Specify the number of videos to be shown.
• Video Title Enable: Activate the option to display the video title.
• Reload Videos(Minutes): Specify the time in minutes for reloading the video.

YouTube Channel Videos

• Channel ID: Enter your channel Id.
• Number Of Videos: Specify the number of videos to be shown.
• Video Order: Enable the option to display videos in order.
• Video Title Enable: Activate the option to display the video title.
• Reload Videos(Minutes): Specify the time in minutes for reloading the video.

• 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.
    • Image size: Choose the size for your icon image 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.

LightBox

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

Slide Show

• 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.
• Arrows: Enable the option to display arrows.
• 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.
• Hide Bar Delay: Set the hide delay duration.

Video

• Autoplay: Enable the option to autoplay the video on slide change.

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.
• Esc: Enable the option to close the lightbox gallery by pressing Esc key.
• Next HTML: Enter the HTML for navigation next icon.
• Previous HTML: Enter the HTML for navigation previous icon.

Thumbnail

• 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.

Hash URL

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

• Custom Slider Name: Enable the option to give a unique name.
  • Gallery ID: Enter the unique id.

Share

• 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.

Filter

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

• Heading: Enter the title for filter box.
• Filter Title HTML Tag: Select the HTML tag for title.
• All Category Text: Enter the text to show instead of “ALL.”
• 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 dropdown.

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 the given options.
• Multirow: Activate the option to display multiple row(applicable when Loop is disabled).
• Slide Per View: Specify the number of slides to display per view.
• Slide Per Group: Specify the number of slides to display per group.

Setting

• Speed: Set the speed.
• Autoplay: Enable the option to play carousel automatically.
  • Duration: Set the duration.
• Space Between Slides: Specify the space between slides.
• Auto Height: Enable the option if needed.
• Pause On Hover: Activate the option to pause slides on hover.

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.

Prev/Next Navigation

• Enable: Enable the option if needed.
  • Position: Select either inside or outside.
  • Icon Prev: Select the icon for previous navigation.
  • Icon Next: Select the icon for Next navigation.
  • Horizontal Position: Select the horizontal position of navigation(applicable if navigation position is selected as inside).
  • Vertical Position: Select the horizontal position of navigation(applicable if navigation position is selected as inside).

Settings

• Columns: Specify the number of columns(applicable for Grid Layout type).
• Horizontal Gap: Specify the horizontal gap(applicable for Grid Layout type)
• Vertical Gap: Specify the vertical gap(applicable for Grid Layout type)
• Aspect Ratio: Select the aspect ratio of video.
• Video Details Layout: Choose the specific time at which you would like to showcase your video information.

Style

Video Details

Title

• Color: Select the color of title.
• Typography: Set the typography.
• Text Shadow: Set the text shadow.

Description

• Color: Select the color of title.
• Typography: Set the typography.
• Text Shadow: Set the text shadow.

• Gap: Specify the gap between the details.
• Alignment: Select the alignment for video details.
• Background Type: Select either Classic or Gradient.

Classic

• Color: Choose the color for the background.
• Image: Either upload an image or select a dynamic tag for display.

Gradient

• Color: Select the color for the background.
• Location: Determine the position of the color on the background by specifying their location in percentage.
• Second Color: Select the second color for the background.
• Location: Determine the position of the second color on the background by specifying their location in percentage.
• Type: Select either Radial or Linear.
  • Radial
    • Position: Set the position.
  • Linear
    • Angle: Set the angle using DEG, GRAD, RAD, and TURN.

Video

• Background Type: As we mentioned above, Choose either Classic or Gradient. Click here.
• Box Shadow: Set the box shadow properties.
• Hover Box Shadow: Set the hover box shadow properties.
• Border Type: Select the border.
• Border Radius: Set the border radius.

Overlay

• Background Type: As we mentioned above, choose either Classic or Gradient. Click here.

Filter

Heading

• Color: Select the color of filter heading.
• Typography: Set the typography.
• Text Shadow: Set the text shadow.

Filter

• Gap: Set the gap between filter items
• Typography: Set the typography.

Normal

• Color: Select the color of category items.
• Background Type: As we mentioned above, choose either Classic or Gradient. Click here.
• Box Shadow: Set the box shadow.
• Border Type: Select the border.

Active

Styling controls for Active State are available under this section. These controls will work when the item is in active state.

• Border Radius: Set the border radius.
• Padding: Set the padding.

Dropdown

• Stacked Device: Choose from Mobile or Tablet.

• Gap: Specify the gap between filter title and filter item box.
• Vertical Alignment: Select the vertical alignment.
• Horizontal Alignment: Select the horizontal alignment.
• Background Type: As we mentioned above, choose either Classic or Gradient. Click here.
• Border Type: Select the border type.
  • Width: Enter the width of border.
  • Color: Enter the color of border.
• Border Radius: Set the border radius.
• Padding: Set the padding.
• Margin: Set the margin.

Icon

Normal

• Primary Color: Select the primary color of icon.
• Secondary Color: Select the secondary color of icon.

Hover

Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.

• Size: Set the size of the Icon.
• Padding: Set the padding for the Icon.
• Rotate: Set the rotation of your Icon in degrees.
• Border Width: Set the border’s width.
• Border Radius: Set the border’s radius.

Carousel

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

Prev/Next Navigation

Normal

• Color: Select the color of navigation.
• Background Color: Select the background color of navigation.
• Border Type: Select the border type.
• Border Radius: Set the border radius.

Hover

Styling for hover state are available under this section. These settings will be applied when someone hovers the navigation.

• Arrow Size: Set the size of arrow.
• Horizontal Offset: Set the horizontal offset properties.
• Vertical Offset: Set the vertical offset properties.
• Padding: Set the padding.

Scrollbar

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

• Scrollbar Size: Set the size of scrollbar.
• Scrollbar Drag Color: Select the color for scrollbar drag.
• Scrollbar Color: Select the scrollbar color.

Note: Only applicable when selecting Pagination Type in Carousel section. Section name and features vary based on the selected Pagination Type.

Fraction

• Background Color: Select the background color of pagination.
• Color: Select the color of pagination.
• Typography: Set the typography.
• Padding: Set the padding.

Dots

• Dot Size: Set the bullet dot size.
• Top Offset: Set the offset from the Top.
• Active Dot Color: Select the color for active state.
• Inactive Dot Color: Select the color for inactive state.
• Margin: Set the margin.

Progress Bar

• Progress Bar Color: Select the color of progress bar.
• Progress Color: Select the color of progress.
• Progress Bar Size: Enter the size of progress bar.
• Margin: Set the margin.

Check out the Demo page of Video Gallery.