- Home
- Design system
- Elements
- Video
Video
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:
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>
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:
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>