Video Element
The Video Element plays a video file hosted on your own site. You upload an MP4 file, optionally a WebM version, and the element shows it with the browser’s built-in video player, without any external video platform. Nothing is loaded from a third-party service, and the file stays under your control.
It works well for short background clips, product demonstrations or looping animations. You decide whether the video plays automatically, is muted, loops and shows controls, and you can add a preview image, subtitles, a color overlay, rounded corners and a shadow.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Video Element
Add the Video Element to any column and upload your file in Video MP4 Upload. Video WebM Upload is optional. Use Start Time and End Time (in seconds) to play only part of the file, and Video Max Width to limit its size.
Set the playback with Video Controls, Autoplay Video, Mute Video and Loop Video; the element starts muted, autoplaying and looping by default. Preview Image is shown before playback starts, and Track Tags adds caption, subtitle, chapter or description files in WebVTT format, each with a kind, label and language.
On the Design tab, Overlay Color places a color layer over the video; a fully opaque color is automatically reduced to 50% opacity so the video stays visible. Add Border Radius, a Box Shadow, the Alignment and the Margin above and below. Video Max Width, Video Controls and Video Preloading fall back to the Global Options when you leave them on their defaults.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Video. Change them there to style every Video at once.
General
| Heading | Description |
|---|---|
| Video MP4 Upload | Add your MP4 video file. This format must be included to render your video with cross-browser compatibility. |
| Video WebM Upload | Add your WebM video file. This is optional, only MP4 is required to render your video with cross-browser compatibility. |
| Start Time | Specify a start time for the video (in seconds). |
| End Time | Specify an end time for the video (in seconds). |
| Video Max Width | Set the maximum width the video should take up. Enter value in pixel (px) or percentage (%), for example 200px. Leave empty to use full video width. |
| Video Controls | Controls whether the video controls should show or not. |
| Video Preloading | Controls how / if the browser should preload the video. Choose “Metadata” if only the video metadata should be preloaded on page load (in Chrome needed for the preview image to load) or “Auto” to preload the full video on page load. |
| Autoplay Video | IMPORTANT: In some modern browsers, videos with sound won’t be autoplayed. |
| Mute Video | IMPORTANT: In some modern browsers, videos with sound won’t be autoplayed. |
| Loop Video | Controls whether the video should loop or not. |
| Track Tags | Add track tags to the video element. |
| Preview Image | Upload an image to display as a video preview. IMPORTANT: In Chrome the preview image will only be displayed if “Video Preloading” is set to “Metadata”. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Overlay Color | Controls the overlay color of the video element. |
| Border Radius | Enter values including any valid CSS unit, for example 10px. |
| Box Shadow | Set to “Yes” to enable box shadows. |
| Box Shadow Position | Set the vertical and horizontal position of the box shadow. Positive values put the shadow below and right of the box, negative values put it above and left of the box. In pixels, ex. 5px. |
| Box Shadow Blur Radius | Set the blur radius of the box shadow. In pixels. |
| Box Shadow Spread Radius | Set the spread radius of the box shadow. A positive value increases the size of the shadow, a negative value decreases the size of the shadow. In pixels. |
| Box Shadow Color | Controls the color of the box shadow. |
| Alignment | Select the video’s alignment. |
| Margin | Spacing above and below the video. Enter values including any valid CSS unit, for example 4%. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
Tips
- Browsers only autoplay videos without sound. Keep Mute Video on Yes when Autoplay Video is on.
- Compress the video before you upload it. Large files slow down the page, especially with Video Preloading set to Auto.
- In Chrome the Preview Image only appears when Video Preloading is set to Metadata.
- For videos with speech, add a captions or subtitles file under Track Tags. It helps visitors who cannot play sound and is an accessibility requirement for many sites.
- Keep the controls visible for videos with content that visitors should be able to pause; hide them only for decorative background clips.