How to Use the Video Marquee Widget in Elementor?

What is the Video Marquee widget?

The Video Marquee widget is a powerful and dynamic tool for displaying a collection of videos in a continuously scrolling loop. This widget allows you to create an eye-catching video banner that automatically plays a series of videos from platforms like YouTube and Vimeo. It’s a perfect solution for showcasing video testimonials, product demonstrations, or a portfolio of work in a visually engaging and modern format.

Common use case

A common use case for the Video Marquee widget is to create an engaging portfolio section on a website’s homepage. By displaying a continuously scrolling banner of short video clips, a company can immediately capture a visitor’s attention and showcase their expertise. This provides a quick, dynamic overview of their work without requiring the user to navigate to a separate page or click through a traditional gallery.

Additional use cases

• Video Testimonials: Showcase a continuous loop of customer video reviews.
• Educational Content: Display snippets of tutorial or course videos on a learning platform.
• Event Highlights: Create a dynamic marquee of key moments from a recent conference or event.
• Vlog Series: Highlight the latest videos from a YouTube or Vimeo channel.

Requirements

• You need the Marquee Addons Pro plugin installed and activated on your website.
• You can find detailed installation instructions in our dedicated installation blog post.
• Make sure that this addon is enabled so you can find it in the Elementor editor.
• Marquee Addons works only with the Elementor Page Builder plugin, so you will need to have it installed and activated as well.

Add the widget

To add the powerful Video Marquee widget to your Elementor-powered website, follow these simple steps:

1. Navigate to the Elementor editor.
2. Search for the Video Marquee widget.
3. Drag the widget to your desired location on the page.
4. Configure the widget’s settings in the left-hand panel.
5. Update the page to save your changes.

Video

See a video demonstrating the widget in action.

Settings for the Video Marquee widget

The Video Marquee widget offers extensive customization options categorized into three main tabs: Content, Style, and Advanced.

Content tab

Videos:

1. Video List: Use this repeater field to add and manage the individual videos in your marquee. A note suggests keeping the video list under 5 items for best performance.
2. Source: Select the video source, either YouTube or Vimeo.
3. Link: Paste the URL of your video.
4. Start Time/End Time: Specify a start and end time (in seconds) to play only a specific segment of the video.

Video Options:

1. Autoplay: Toggle to enable or disable autoplay. Note: Autoplay is affected by Google’s Autoplay policy on Chrome browsers.
2. Mute: Toggle to mute the video.
3. Loop: Toggle to make the video loop continuously.
4. Player Controls: Toggle to show or hide the video player controls.
5. Modest Branding: Toggle to hide YouTube’s player branding.
6. Privacy Mode: Enable this for enhanced privacy on YouTube/Vimeo.
7. Lazy Load: Enable this to improve page load speed.
8. Suggested Videos: Choose what to display after the video finishes (e.g., videos from the same channel).
9. Image Overlay: Toggle to enable or disable a custom image overlay for your videos.
10. Choose Image: If the image overlay is enabled, you can upload a custom image to use as the overlay.

Image Overlay:

1. Image Overlay: Toggle to enable or disable a custom image overlay for your videos.
2. Choose Image: If the image overlay is enabled, you can upload a custom image to use as the overlay.
3. Play Icon: Toggle to show or hide a play icon on the video overlay.
4. Icon: Choose an icon to use for the play button.

Gap:

1. Gap: Space between the video marquees.

Marquee Options:

1. Show Vertical: Enable this for vertical scrolling instead of horizontal.
2. Reverse: Change the direction of the animation.
3. Pause On Hover: When a user’s mouse hovers over the widget, the animation will stop.
4. Animation Speed: Control the speed of the scrolling animation.
5. Show Edge Shadow: Toggle this to add a subtle shadow effect to the edges of the marquee.

Style tab

Videos:

1. Aspect Ratio: Choose the aspect ratio for your videos (e.g., 16:9).
2. Gap: Adjust the spacing between each video in the marquee.
3. CSS Filters: Apply CSS filters to the videos (e.g., blur, brightness, contrast).
4. Border Type: Add a border to the videos.
5. Border Radius: Adjust the corner radius of the videos.

Play Icon:

1. Color: Set the color of the play icon.
2. Size: Adjust the size of the play icon.
3. Box Shadow: Add a box shadow effect to the play icon.

Advanced tab

• The Advanced tab provides a comprehensive set of controls that are common to most Elementor widgets, allowing for refined design and responsiveness. Here you can adjust the widget’s Layout (e.g., positioning, Z-index), apply engaging Motion Effects (like scrolling effects or entrance animations), customize its Background, add Borders and Box Shadows, apply Masks for unique shapes, control Responsive visibility across devices, add custom HTML Attributes, and inject Custom CSS for bespoke styling.