Use the video element to add a video to your layout canvas. The video element supports multiple formats and provides custom controls that can be styled to match your brand for a consistent cross-browser experience.
Locating the video element¶
To find the Video element:
- Navigate to a component or a template with the Layout canvas
- Click the + button on the Layout canvas
- Within the Elements tab, look for the Video element.
The Video element includes the following fields:
Video URL¶
- Video URL - Insert the URL of the video that you would like to display, this can be from Youtube, Vimeo or a CDN hosted video. Supported video formats include MP4, OGG, WebM, MKV. It is recommended to use a CDN hosted video as it uses the HTML5 <video> element to render the video.
- Preview - Shows a preview of the video being used. The preview does not show the settings applied in Video controls.
Video poster image¶
- Image - Upload an image to be shown while the video is downloading or until the user clicks the play button. If a poster image is not uploaded then the first frame of the video is used
- Drupal image style - Select the Drupal image style to apply to the poster image
- Show on pause - Show the poster image on pause of the video
- Show at end - Show the poster image at the end of the video. Auto rewind also needs to be enabled for this feature to work.
Video behaviour¶
- Preload - Select if you would like the video to preload.
- Nothing - The video will not be preloaded
- Video info - To preload the video information such as duration
- Buffer video - This will preload the video.
- Autoplay - Set the video to play as soon as it's loaded
- Loop video - Set the video to start again when it's finished
- Mute video - Mute the audio of the video
- Auto rewind - Rewind to the beginning of the video when it's finished
- Click to play/pause - Click the video to toggle play/pause
- Pause other videos - When video playing other video players are paused
- Play on hover - Set the video to play when hovered over.
Video controls¶
These are custom video controls which can be styled consistently across multiple browsers.
- Always show controls - Show the controls at all times, if the video is playing or not
- Show controls on load - Show player controls on load of the video
- Show controls on pause - Show player controls when the video is paused
- Play - center - Show/hide the play button overlaid on the center of the video
- Play/pause - bar - Show/hide the play and pause controls
- Current time - Show/hide the current time of the video that's being played
- Progress bar - Show/hide the progress bar
- Duration - Show/hide the duration of the video
- Volume - Show/hide the volume control
- Full screen - Show/hide the fullscreen button
Custom style¶
- Media style - Apply a media custom style to the video. The custom style allows you to style the video player controls using CSS.
Match heights¶
- Match heights - Match the height of the element using:
- None - Removes the match heights at the specific breakpoint
- Class - Match the height of the element with another element with the same class name
- Children with class - Match the heights of any child elements with the same class name
- Child element - Match the heights of all child elements of the same type.
For more information on Match heights, see Match the heights of elements.