How to Add and Customize Videos on Your Website

Videos can make your website more engaging, whether they’re tutorials, product showcases, or background visuals. You can add videos from YouTube, Vimeo, a custom upload, or an external URL.

1. Adding a Video Element

1. Open the Elements Panel on the left.
2. Under Media, find the Video Element.
3. Click, hold, and drag it to the desired location on your page.

2. Choosing a Video Source

Click on the video element to open the Options Toolbar on the left. You will see four choices:

YouTube (Default Option)

• Copy the YouTube share link and paste it into the video settings.
• Adjust the aspect ratio (16:9 is standard for most web pages).
• Under Advanced Settings, you can:
• Disable controls (hide play/pause buttons).
• Remove branding (hide YouTube logo).
• Enable autoplay (starts playing when the page loads).
• Mute the video (useful for autoplay).
• Loop the video (restarts after finishing).
• Lazy load (delays loading for faster page speed).
• Start and end at specific times (enter seconds).

Vimeo

• Works the same as YouTube—paste the Vimeo share link into the video settings.
• Offers similar controls for autoplay, looping, and branding removal.

Custom Upload

• Upload your own MP4, WebM, or other supported formats.
• Advanced options include:
• Autoplay & loop
• Show/hide controls
• Lazy load for performance optimization
• 
  

External URL

• Paste a direct video file link (must end in .mp4, .webm, etc.).
• Uses the browser’s built-in video player.

3. Customizing the Video Player

• Resize manually by dragging the corner handles.
• Under Settings → Width, set a percentage (e.g., 100% for full width) or a fixed pixel size.
• Align the video left, center, or right.
• Adjust padding and margins to position it properly.

4. Adding a Custom Cover Image

• Enable Custom Cover to upload your own thumbnail.
• The play button will appear over the image.
• Customize the size, color, and icon style of the play button.

5. Applying Filters & Effects

• Overlay Colors – Add a tint or gradient effect over the video.
• Borders & Shadows – Style the player with outlines and depth.
• Rounded Corners – Apply a soft, modern look.

6. Optimizing for Mobile & Tablets

• Resize videos separately for desktop, tablet, and mobile.
• Avoid autoplay on mobile (can be annoying to users).
• Ensure videos fit within responsive columns to avoid overflow.

Why Use Videos?

• Boost engagement – Keep users on your site longer.
• Explain complex topics – Tutorials and product demos.
• Improve conversion rates – Landing pages with videos perform better.

Adding videos the right way ensures a seamless experience across all devices while keeping your website visually appealing.