Video

stable dark-mode icon-support component-colors short-class-names

Overview

Video is a basic html only implementation of a video player

Options

Basic usage

Applied directly to a video element

<video class="ds-video" controls src="https://player.vimeo.com/progressive_redirect/playback/56854878/rendition/720p/file.mp4?loc=external&log_user=0&signature=8b0e0d58fde01f3a8ad2a87a3894828ed2a98807b049ed48c900167dc119687e" type="video/mp4">
</video>

Applied to a container element

<div class="ds-video">
  <video controls src="https://player.vimeo.com/progressive_redirect/playback/56854878/rendition/720p/file.mp4?loc=external&log_user=0&signature=8b0e0d58fde01f3a8ad2a87a3894828ed2a98807b049ed48c900167dc119687e" type="video/mp4">
  </video>
</div>

Size

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="https://player.vimeo.com/progressive_redirect/playback/56854878/rendition/720p/file.mp4?loc=external&log_user=0&signature=8b0e0d58fde01f3a8ad2a87a3894828ed2a98807b049ed48c900167dc119687e" type="video/mp4">
</video>

Controls

Control bar

If you apply the ds-video element to a container element, you can include a ds-switch element with the class __controls 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*="__controls"]');

  if (videoControls.length > 0) {
    const videoPlayer = videoComponent.querySelector('video')
    videoControls.forEach((input) => {
      input.addEventListener('change', (e) => {
        let mode = e.target.value;
        // Remove existing widescreen if set
        videoComponent.classList.remove('--full-width');
        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
          videoPlayer.requestPictureInPicture();
          videoControls[0].checked = true;
        } else if (mode === 'wide') {
          // Trigger wide screen
          videoComponent.classList.add('--full-width')
        }
      });
    })
    videoPlayer.addEventListener("playing", (event) => {
      videoComponent.classList.add('--playing')
    });
    videoPlayer.addEventListener("pause", (event) => {
      videoComponent.classList.remove('--playing')
    });
  };
});

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 __controls">
    <label class="--icon-minimize">
      <input type="radio" name="video-01" value="small" checked>
      <span>Small</span>
    </label>
    <label class="--icon-grid-row">
      <input type="radio" name="video-01" value="wide">
      <span>Wide</span>
    </label>
    <label class="--icon-padding">
      <input type="radio" name="video-01" value="fullscreen">
      <span>Fullscreen</span>
    </label>
    <label class="--icon-iframe">
      <input type="radio" name="video-01" value="picture-in-picture">
      <span>Picture in Picture</span>
    </label>
  </div>
  <video controls src="https://player.vimeo.com/progressive_redirect/playback/56854878/rendition/720p/file.mp4?loc=external&log_user=0&signature=8b0e0d58fde01f3a8ad2a87a3894828ed2a98807b049ed48c900167dc119687e" type="video/mp4">
  </video>
</div>

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

Small Wide Fullscreen Picture in Picture

Play/Pause

If you apply the ds-video element to a container element, you can include an element with the class __playpause which will automatically be treated as a play/pause control positioned in the middle of the video.

To implement the play/pause control requires javascript:

Javascript implementing video display controls

const videoComponents = document.querySelectorAll('[class*="ds-video"]');
videoComponents.forEach((videoComponent) => {
  const videoPlayer = videoComponent.querySelector('video');
  const videoPlayPause = videoComponent.querySelectorAll(
    '[class*="__playpause"]',
  );
  if (videoPlayPause.length > 0) {
    videoPlayPause.forEach((playButton) => {
      playButton.addEventListener('click', handlePlayButton, false);
      let label = playButton.getElementsByTagName('span')[0];

      async function playVideo() {
        try {
          await videoPlayer.play();
          playButton.classList.replace(
            '--icon-circle-play-solid',
            '--icon-circle-pause-solid',
          );
          label.innerText = 'Pause';
        } catch (err) {
          playButton.classList.replace(
            '--icon-circle-pause-solid',
            '--icon-circle-play-solid',
          );
          label.innerText = 'Play';
        }
      }

      function handlePlayButton() {
        if (videoPlayer.paused) {
          playVideo();
        } else {
          videoPlayer.pause();
          playButton.classList.replace(
            '--icon-circle-pause-solid',
            '--icon-circle-play-solid',
          );
          label.innerText = 'Play';
        }
      }
    });
  }
});

HTML implementing video play/pause control using a button

<!-- For this demo, the default width has been set to 600px -->
<div class="ds-video" style="--ds-video-width: 600px;">
  <button class="ds-icon --icon-circle-play-solid --xxlarge __playpause"><span>Play<span></button>
  <video src="https://player.vimeo.com/progressive_redirect/playback/56854878/rendition/720p/file.mp4?loc=external&log_user=0&signature=8b0e0d58fde01f3a8ad2a87a3894828ed2a98807b049ed48c900167dc119687e" type="video/mp4">
  </video>
</div>

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