The Video widget allows you to add videos to your website. It usually provides a user-friendly interface for controlling video playback, such as play, pause, rewind, and volume controls. It may also include additional features like fullscreen mode and video quality settings. The Video widget enhances the user experience by delivering engaging video content on your products in a visually appealing and interactive way.
Adding a Video Widget
To add a Video widget:
- Go to the Visual Editor by clicking Design on the Dashboard top panel or by navigating from Dashboard > Channels > Design.
- Navigate to the Widgets list on the Visual Editor Left Panel.
- Type the widget name in the search bar, or expand the Media grouping and select the Video widget.
- Drag and drop the Video widget from the list onto the desired crafting area of the Layout Canvas.
Configuring the Video Widget
Once you have added the Video widget, click it to activate the Property Panel, where you can customize its Styles, Content, and Settings according to your preferences.
To configure the Video widget:
- Go to Styles to modify the widget styling features:
- Select how the video content is resized and fitted within its container:
- Cover - the video is scaled to cover the entire container, filling it without any letterboxing.
- Contain - the video is scaled to fit within the container while maintaining its aspect ratio.
- Fill - the video stretches to fill the entire container, potentially causing distortion if the aspect ratio is not maintained.
- Configure the principal styling features (see Global Styles).
2. Go to Content to modify the video content:
- Click + New Video and select the corresponding video in the Choose Video popup that opens, or upload the video content from the computer, or insert the video URL and click Select.
- Click Change Video, select the corresponding video in the Choose Video popup that opens, or upload the video content from the computer, or insert the video URL, and click Select.
- Enable/disable the video poster.
- Click Change Poster and select the corresponding icon or logo in the Media popup that opens, or upload the media content from the computer, free stock (powered by Unsplash), or URL.
- Select how the video poster is resized and fitted within its container:
- Cover - The video poster is scaled to cover the entire container, filling it without any letterboxing.
- Contain - The video poster is scaled to fit within the container while maintaining its aspect ratio.
- Select the video loading type:
- Lazy Loading - ensures that videos are only loaded when they are about to be displayed on the user's screen. When a customer visits a product page, only the videos initially visible or near the viewport are loaded immediately. As the user scrolls down or interacts with the page, additional videos are loaded dynamically, typically as they come into view.
- Preload - ensures that videos are loaded in advance before they are actually needed. Video preload involves fetching and storing product videos in the user's browser cache so that they can be quickly displayed when the user navigates to a product page or interacts with a product gallery.
Note: By default Lazy Load is selected.
- Choose the video fetch priority if the Preload loading type is selected. The following options are available:
- Low - These videos aren't prioritized for immediate loading and may be fetched after higher-priority resources are loaded.
- High - These videos are prioritized for immediate loading and fetched as soon as possible to enhance user experience.
- Auto - The system dynamically determines the fetch priority based on preload/lazy load settings.
3. Go to Settings to modify the settings of the widget:
- Enable/disable Custom Play Button to display or hide the play button on the video widget.
- Enable/disable Playback Controls to display or hide buttons that allow users to perform actions such as play, pause, stop, adjust volume, toggle fullscreen mode, etc.
- Enable/disable Mute to display or hide the Mute option that allows users to control the sound of the video content depending on their preferences.
- Enable/disable Auto-Play if you want the video to play automatically without the user's explicit action.
- Enable/disable Loop if you want the video to repeat itself indefinitely until the user manually stops the playback or navigates away from the video widget.
- Indicate the start time to specify a particular moment within the video content where you want the playback to commence rather than starting from the beginning of the video.
- Expand Visibility and select who can view the widget according to the customer’s location, session status, used device type, browser, language preference, etc. (see Visibility Settings).
Modifying the Video Widget Elements
Once you have configured the Video widget, you can modify the corresponding elements inside the Video widget. This allows you to define the appearance and functionality of the widget on your website.
The following elements are available:
- Play Button allows you to add and modify the Play button in the Content tab of the Property Panel:
- Change the button according to your preferences.
- Modify the name of the Play button by providing a brief description or name for the action or feature associated with the item.
- Icon allows you to add or change the icon on the Play Button that best suits your website design. To do so:
- Click Change Icon.
- Go to General Icons and select the corresponding icon from the list.
- Go to My Icons and select the corresponding icon from your uploaded list in Media> Vectors.
Modifying the Play Button Design
You can modify the design of the Video widget Play Button according to your preferences.
To set the button design:
- Go to Styles on the Property Panel.
- Select one of the following options from the Mode drop-down list:
- Normal - the button is displayed as static actively being interacted with or hovered over.
- Loading - the button is displayed with a loading effect.
Tip:
- You can also access the UI Elements available in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for Play Button, or click the plus icon to create a new UI Element and style it according to your preferences.
- Once you have customized each mode, you can use the Dotted Menu to reset or override the Play Button styles. To do so:
- Click the Dotted Menu in the right corner of the Property Panel.
- Select Reset Styles to discard the changes made to the widget and restore its default style.
- Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.