Skip to content


Design System
Home Design System Elements Video



Video is a basic html only implementation of a video player


Basic usage 

Applied directly to a video element
<video class="ds-video" controls src="" type="video/mp4">
Applied to a container element
<div class="ds-video">
  <video controls src="" type="video/mp4">


By default ds-video will display at a maximum width of 800px, or narrower if it’s containing element is smaller.

The following css variables can be set using css, a style tag or javascript to control the default width:

Custom size 

Variable Type Default Description
--ds-video-width size 800px Sets the initial maximum width of the video
<video class="ds-video" style="--ds-video-width: 600px;" controls src="" type="video/mp4">

Full width 

Adding the class --full-width will remove the maximum size, and the video will scale to fit it’s containing element.

Alternatively you can set the css variable to: --ds-video-width: 100%

<video class="ds-video --full-width" controls src="" type="video/mp4">

Additional controls 

If you apply the ds-video element to a container element, you can include a ds-switch element which will automatically be treated as a control bar positioned top left of the video.

To implement the control bar controls will require javascript. The following example demonstrates adding display controls:

Javascript implementing video display controls
const videoComponents = document.querySelectorAll('[class*="ds-video"]');
videoComponents.forEach((videoComponent) => {
  const videoControls = videoComponent.querySelectorAll('[class*="ds-switch"] input');

  if (videoControls.length > 0) {
    const videoPlayer = videoComponent.querySelector('video')
    videoControls.forEach((input) => {
      input.addEventListener('change', (e) => {
        let mode =;
        // Remove existing widescreen if set
        if (mode === 'fullscreen') {
          // Trigger fullscreen and reset controls
          videoPlayer.requestFullscreen({ navigationUI: "show" })
          videoControls[0].checked = true;
        } else if (mode === 'picture-in-picture') {
          // Trigger picture-in-picture and reset controls
          videoControls[0].checked = true;
        } else if (mode === 'wide') {
          // Trigger wide screen
    videoPlayer.addEventListener("playing", (event) => {
    videoPlayer.addEventListener("pause", (event) => {
HTML implementing video display controls
<!-- For this demo, the default width has been set to 600px -->
<div class="ds-video" style="--ds-video-width: 600px;">
  <div class="ds-switch --hide-label --bottom-right">
    <label class="--icon-minimize">
      <input type="radio" name="video-01" value="small" checked>
    <label class="--icon-grid-row">
      <input type="radio" name="video-01" value="wide">
    <label class="--icon-padding">
      <input type="radio" name="video-01" value="fullscreen">
    <label class="--icon-iframe">
      <input type="radio" name="video-01" value="picture-in-picture">
      <span>Picture in Picture</span>
  <video controls src="" type="video/mp4">

For this demo, the default width has been set to 600px