Video element

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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. 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 element

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:

1. Navigate to a component or a template with the Layout canvas
2. Click the + button on the Layout canvas
3. 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.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.

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.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.