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 from Channels on the Dashboard Left Panel.
- 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.
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 Properties
Once you have configured the Video widget, you can modify the corresponding properties inside the Video widget. This allows you to define the appearance and functionality of the widget on your website.
The following properties 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 from the upper-right corner of the Property Panel. Select one as a base for Play Button or create a new UI Element and style it according to your preferences. To do so:
- Click the Dotted Menu on the Property Panel.
- Select Reset Styles to discard the changes made to Play Button, 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.