Video
Add video to your webpage
The Video Element lets you drop a single video into any part of your site with no fuss. It handles YouTube, Vimeo, and standard video files, giving you a clean, reliable way to showcase clips whether they’re hosted online or stored locally. This makes it ideal for product demos, hero sections, tutorials, and anything else where a focused video presentation matters.
Adding Video to your Projects
You can add a video in a few different ways. For YouTube or Vimeo, drag the video URL from your browser straight into the Resources area. If you have a local video file, drag it in from the Finder and Elements will add a copy to your project. You can also import a video from any remote URL.
Video can be added to the background of your site by using the Container Component. Watch this video to learn more: How to add a background video header to your webpage
Supported Video Types
The video component supports the following file types:
YouTube
Vimeo
.mp4
Dropzone
The Video component has a drop-zone in the center of it to allow for custom play buttons, text, graphics, and more.
Video Component Settings
Video
You can add video in several ways. Drag a YouTube or Vimeo URL straight into Resources, drag in a local file from the Finder, or import a video from any remote URL.
Resource These settings define the source and play details for your video.
Options Set when (or if) the video should play automatically.
Autoplay
The following options are available: Immediately, When in Viewport, or Never.
Muted
Set the video to muted by default.
Controls Hide or show the video player controls. This setting only works with .mp4 files.
Loop Specify if the video should loop. This setting only works with .mp4 files.
Lightbox
The Lightbox allows the video to open in an overlay when clicked, giving it full focus without leaving the page.
Enable These settings control how the lightbox appears behind the video.
Color
Sets the backdrop colour shown behind the video while the lightbox is open.
Opacity Adjusts how transparent the backdrop is. Higher values create a darker, more solid overlay.
Blur Adds a subtle blur effect to the page behind the video.
Thumbnail
Thumbnail lets you set the image shown before the video plays. It’s ideal for controlling the look of the video before it loads and helps create a clean, intentional layout.
If you’re using a YouTube link, Elements automatically pulls in the video’s thumbnail and uses it as the default image.
Type Choose between Resource, Custom, or CMS to determine how the image is loaded.
Mode Choose separate thumbnail images for Light Mode and Dark Mode so the design looks correct in both themes.
Image Select the image that appears as the thumbnail. Use a jpg file for best performance and visual quality.
Alt Sets the alt text for the thumbnail image. This improves accessibility and helps search engines understand the content.
Overlay Adds a colour overlay to the thumbnail. Useful for dimming the image and making the play button stand out.
Aspect Ratio
The Aspect Ratio section controls the shape and framing of the video thumbnail. You can use predefined ratios for quick layouts or set a custom ratio for more precise control.
Additional options let you control how the image fits and where it’s positioned within its frame.
The aspect ratio applies to the Thumbnail and not the video.
Aspect Ratio These settings define the overall shape of your image container. Choose from Auto, Wide, or Tall presets to control how the image is displayed.
Auto: Adapts to the image’s original dimensions.
Wide: Creates a landscape-style frame.
Tall: Creates a portrait-style frame.
Custom: More control over cropping.
The Custom Ratio allows you to define a specific aspect ratio manually. Enter a ratio in the format x/y, such as 1/1 for a square or 5/7 for portrait-style content.
Object Fit Determines how the image is scaled within its container.
Fill: Stretches the image to fill the container, possibly distorting it.
Contain: Ensures the full image is visible within the container.
Cover: Crops edges if necessary to fill the container without distortion.
None: Keeps the image at its original size.
Scale Down: Reduces the image size only if it’s larger than the container.
Position Controls where the image is anchored within its container. Choose from positions like: Top, Center, Bottom, Left, Right, or combinations like Top Center, Bottom Right, etc.
Link to a page, resource or website.
Set advanced properties for Position, Z-index, Visibility, and more.
Set the Width and Height for elements.
Add Margin and Padding to Components.
Adjust animation curve, duration, and delay for transitions.
Apply box shadows rollovers and more.
A quick and flexible way to apply common visual effects.
Apply effects like rotate, scale, skew, and more.
Set border width, colour, radius and more.
Apply Tailwind Classes and Custom ID's.
Last updated
Was this helpful?