Use the Video Widget to easily embed videos on your page.

Video Widget
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.

© WebshopWorks - Professional PrestaShop Addons