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.

Comments

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

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:

• 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.

Important

If you want to use a video from Vimeo, you can only disable Vimeo's player controls if the host account is business or pro level. In the case you don't have a business or pro level account it is recommended to disable the Site Studio custom video controls.

If you want to use a Youtube video, the controls are shown by default. Disable the Site Studio custom video controls, or add a parameter to the end of the Youtube URL to disable the Youtube 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.

Important

If you want the video to autoplay, you must also set the video to be muted. This is due to web browser restrictions.

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.