Use the Video Widget to easily embed videos on your page.
Video Widget
Content tab
Video
- Source
- Choose the video source from a selection of options including Youtube, Vimeo, Dailymotion, or Self Hosted.
- Link
- Input the URL of the desired video.
- Start/End time
- Specify the start and end time of the video segment for playback. Leave the fields blank for full-length video playback.
Youtube video options
- Autoplay
- Slide the toggle to "YES" to enable automatic video playback when the page loads.
- Mute
- Slide the toggle to "YES" to mute the video's audio during playback.
- Loop
- Slide the toggle to "YES" to set the video to loop continuously.
- Player Controls
- Toggle the display of player controls (such as Play/Pause, Volume, etc.) on or off as per your preference.
- Modest Branding
- Slide the toggle to "YES" to conceal the YouTube logo during video playback, while the logo still remains visible on the video's thumbnail.
- Privacy Mode
- Slide the toggle to "ON" or "OFF." When set to "ON," YouTube won't store information about visitors on your website unless they engage with the video.
- Suggested videos
- Choose between "Current Video Channel" or "Any Video" to control the display of suggested videos after the current video ends.
Vimeo video options
- Autoplay
- Slide the toggle to "YES" to enable automatic video playback when the page loads.
- Mute
- Slide the toggle to "YES" to mute the video's audio during playback.
- Loop
- Slide the toggle to "YES" to set the video to loop continuously.
- Controls color
- Select the color for the player controls, encompassing elements like Play/Pause buttons, etc., to align with your design aesthetics.
- Intro title
- Toggle the display of the introduction title on or off to enhance the introductory visual impact.
- Intro portrait
- Toggle the display of the introduction portrait on or off to personalize the introductory section.
- Intro byline
- Toggle the display of the introduction byline on or off to provide additional contextual information within the introduction.
Dailymotion video options
- Autoplay
- Slide the toggle to "YES" to enable automatic video playback when the page loads.
- Mute
- Slide the toggle to "YES" to mute the video's audio during playback.
- Player controls
- Toggle the display of player controls (such as Play/Pause, Volume, etc.) on or off as per your preference.
- Video info
- Toggle the display of video information, including the video's title, on or off to provide contextual details.
- Logo
- Toggle the display of the Dailymotion logo on the video player on or off, depending on your preference..
- Controls color
- Select the color for the player controls, encompassing elements like Play/Pause buttons, etc., to align with your design aesthetics.
Self Hosted video options
- Autoplay
- Slide the toggle to "YES" to enable automatic video playback when the page loads.
- Mute
- Slide the toggle to "YES" to mute the video's audio during playback.
- Loop
- Slide the toggle to "YES" to set the video to loop continuously.
- Player Controls
- Toggle the display of player controls (such as Play/Pause, Volume, etc.) on or off as per your preference.
- Download button
- Show or Hide the Download Button (applicable for Chrome only).
- Poster
- Add an image overlay to the video.
Image overlay
- Image overlay
- Toggle the display of an image overlay on or off to add an additional visual layer.
- Choose image
- Select the image to be used as the overlay.
- Play icon
- Slide the toggle to "YES" to include a play icon, indicating interactivity, if applicable.
- Lightbox
- Toggle the lightbox feature on or off to allow the video to be displayed within a lightbox. If enabled, ensure an image is set as well for optimal functionality.
Style Tab
Video
- Aspect Ratio
- Adjust the video's aspect ratio by selecting from options such as 1:1, 3:2, 4:3, 16:9, 21:9, and 9:16 to achieve the desired visual proportions.
- CSS Filters
- Configure visual effects for the video by applying settings for blur, brightness, contrast, saturation, and hue adjustments.
Play Icon (Image Overlay - Play Icon is enabled)
- Color
- Choose a color for the Play button to ensure it seamlessly integrates with your design.
- Size
- Set the dimensions of the Play button to achieve the desired visual prominence.
- Shadow
- Enhance the visual depth of the Play button by incorporating a shadow effect.
Lightbox (Image Overlay - Lightbox is enabled)
- Background Color
- Select a color to envelop the video, providing a visual frame. Refer to the "Pick a color" section for comprehensive guidance.
- UI Color
- Choose a color for the Close icon to ensure visual consistency. Detailed insights are available in the "Pick a color" section.
- UI Hover Color
- Opt for a color for the Close icon that appears when visitors hover over it, enhancing interactivity.
- Content Width
- Set the width of the content within the lightbox for optimal presentation.
- Content Position
- Align the content within the lightbox to either the center or the top, ensuring harmonious arrangement.
- Entrance Animation
- Select an animation to apply as the video enters the lightbox, enhancing visual engagement.
Advanced tab
Layout
- Margin
- Tailor the margin to control the external space surrounding the widget, determining its separation from adjacent elements.
- Padding
- Define the padding within the widget to manage internal spacing, influencing the arrangement and appearance of its content.
- Width
- Choose from options like full, inline, custom, or calculate to specify the widget's width behavior within the layout.
- Vertical align (Full width, Inline, Custom, or Calculate options)
- Position the button's content, choosing from options such as start, center, end, or stretch to achieve the desired vertical alignment within its container.
- Custom width (Custom option)
- Specify the widget's width by using a slider to increase or decrease the width in pixels, percentage, or viewport width. You can also manually enter the specific value you want for the width.
- Calc (Calculate option)
- The calc() CSS function enables the precise calculation of values within stylesheets, allowing dynamic adjustments based on various mathematical expressions for enhanced design flexibility.
- Min width (Calculate option)
- Establish a minimum width constraint for the widget, ensuring it retains a specified width even when content is limited, contributing to a consistent and structured layout.
- Order
- Set the order as start, end, or custom to dictate the widget's positioning within its container, enhancing its visual hierarchy.
- Size (Full width, Inline, Custom, or Calculate options)
- Set the size to none, grow, or custom to set the widget's size within its container,.
- Position
- Select between absolute or fixed positioning to determine how the widget is placed within the layout, affecting its relationship with other elements.
- Z-index
- Adjust the Z-index value to establish the stacking order of the widget in relation to other elements, ensuring controlled layering.
- CSS ID
- Assign a distinctive CSS ID to the widget for targeted styling or interaction through custom CSS or scripting, allowing for tailored customization.
- CSS Classes
- Set specialized CSS classes for the widget, enabling custom styling via external stylesheets or scripts, enabling refined design adjustments.
Motion Effects
- Scrolling Effects
- Incorporate scrolling effects to add dynamic visual transitions as users navigate through the content.
- Mouse Effects
- Elevate your design with the Mouse Effect feature, incorporating captivating mouse tracking and 3D tilting interactions that respond dynamically to user engagement, adding an irresistible layer of interactivity to your content.
- Sticky Effects
- Utilize sticky effects to maintain specific elements in view as the user scrolls, enhancing user experience.
- Entrance Animation
- Apply entrance animations to elements within the section for engaging and captivating presentations.
Transform (Normal & Hover)
- Opacity
- Control the transparency of elements, allowing for captivating fade-in and fade-out effects.
- Rotate
- Apply dynamic three-dimensional rotation to elements, creating an immersive visual experience.
- Offset (X and Y)
- Adjust horizontal and vertical positioning for precise element placement and animation.
- Scale
- Fine-tune the size of elements, enabling smooth size transitions for engaging effects.
- Skew (X and Y)
- Introduce slanted or distorted perspectives to elements, adding a unique touch to your design.
- Transition Duration and Delay (ms)
- Tailor the speed of transformations and introduce delays for fluid and controlled animations.
- Flip Horizontal/Vertical
- Facilitates the transformation of an element's visual orientation, either horizontally or vertically, effectively creating a mirrored reflection of the element's appearance.
Background (Normal & Hover)
- Background type
- Select from None, Classic or Gradient for the section's background type. Feel free to incorporate each option's specific features to enhance the background dynamics.
Border (Normal & Hover)
- Border type
- Define the style of the element's border, allowing for versatile design variations.
- Border radius
- Control the curvature of element corners with precision, enhancing visual appeal and softening edges.
- Box shadow
- Enhance elements with subtle or dramatic shadow effects, adding depth and dimension to your design.
- Border width
- Set the thickness of the border surrounding the button element.
- Border color
- Specify the color of the border, influencing its appearance and integrating seamlessly with the overall design.
Visibility
- Scheduled Visibility
- Schedule the section's visibility to appear or disappear at specific times, optimizing content display.
- Customer Group Visibility
- Tailor the section's visibility based on different customer groups, providing personalized experiences.
Responsive
- Reverse Columns
- Reorder columns to adapt the layout for mobile or alternative arrangements.
- Device-specific Hiding
- Toggle section visibility for distinct devices such as mobile, tablet, and desktop.
Custom CSS
- Custom CSS
- Inject your own custom CSS code to implement precise styling adjustments, allowing for a tailored design approach.