Customize the look and feel of the video widget. In this section, you are able to customize the following:
Play button
Navigation arrows
Heading text
Video thumbnails
Advanced settings
Play button
Step 1. Choose between Icon Play Button or Text Button
For Icon Button:
Icon style: choose from 4 different button styles
Size: small, medium, large
Position: center, left bottom, left top
For Text button:
Text style: Input the text to be displayed on the button (e.g., "Play", "Start", "Watch Now").
Size: add your px.
Position: center, left bottom, left top
Button background: choose a background color to make the button stand out.
Border: add a solid border around the button.
You can customize the play button separately for both desktop and mobile versions, ensuring that the button looks and functions optimally on all devices.
Click "Save" everytime you're satisfied with your changes or "discard changes" to revert back to the previous saved state.
Navigation arrows
Step 2. Toggle the option to enable navigation arrows for your slider.
Choose from 4 different arrow styles
Choose a color for the navigation arrows
Position: inside or outside the slider
Arrow background color: choose a background color for the arrows to enhance visibility.
The navigation arrows are available only for these types of widgets: video carousel, stories, highlight slider, scattered, and 3D carousel.
We recommend enabling navigation arrows especially for desktop users to enhance navigation and provide a better browsing experience. You can customize the navigation arrows separately for both desktop and mobile versions, ensuring that the arrows look and function optimally on all devices.
Heading text
Step 3. Toggle the options to enable heading texts for your slider.
Include heading text:
Text Style:
Simple: Manually customize the text style by setting the color, choosing between bold or normal font weight, and adjusting the size.
CSS: Apply your own CSS class for more advanced styling.
Include subheading text:
Text Style:
Simple: Manually customize the text style by setting the color, choosing between bold or normal font weight, and adjusting the size.
CSS: Apply your own CSS class for more advanced styling.
Style Position and Paddings:
Position: Align your heading and subheading text to the left, center, or right.
Paddings: Customize the padding at the bottom and between the heading and subheading for optimal spacing.
You can customize the heading text separately for both desktop and mobile versions, ensuring that the texts look and function optimally on all devices.
Thumbnails
Step 4. Thumbnail Format: You can choose from 5 different thumbnail formats to best fit your design and content needs.
Thumbnail style:
Corner Radius: Customize the corner radius of your thumbnails
Border: Add borders to your thumbnails to make them stand out and create a distinct separation between each thumbnail.
Meta Data: you have the option to enable or disable the following metadata on your thumbnails:
Video Duration: Display the length of the video on the thumbnail.
Video Title: Show the title of the video directly on the thumbnail.
Video Description: Provide a brief description of the video on the thumbnail.
Enable Video Autoplay: enhance user engagement by immediately drawing attention to your content and keeping viewers engaged longer.
You can customize the thumbnail separately for both desktop and mobile versions, ensuring that it looks and functions optimally on all devices.
Settings
Step 5. Apply more advanced settings
Layout:
Choose How Many Columns: Select the number of columns to display your videos.
Choose Background Color: Pick a background color for your layout.
Carousel Style:
Fixed Videos: Videos remain fixed in their positions.
Extended Videos: Videos can extend beyond their initial view.
Carousel style is available only for the video carousel widget type.
Spacing: adjust margins around your layout.
Enable Autoscroll:
Autoscroll: Enable this feature to automatically flip through the carousel every few seconds.
Randomize Video Playlist: videos will appear in a random order each time the page is refreshed.
You can apply the settings separately for both desktop and mobile versions, ensuring that the carousel looks and functions optimally on all devices.
Didn't find what you were looking for?
Contact your CSM or get in touch with our support team in chat or by email.