Video

The HTML <video> element is used to show a video on a web page.

On this page

How it works

The controls attribute adds video controls, like play, pause, and volume.

The <source> element allows you to specify alternative video files from which the browser may choose. The browser will use the first recognized format.

Examples

Local video

The HTML <video> element is used to show a video on a web page.

<div class="aspect aspect-16x9">
  <video controls>
    <source src="sample-video.mp4" type="video/mp4">
    <source src="sample-video.ogg" type="video/ogg">
  </video>
</div>

To start a video automatically, use the autoplay attribute:

<div class="aspect aspect-16x9">
  <video controls autoplay>
    <source src="sample-video.mp4" type="video/mp4">
    <source src="sample-video.ogg" type="video/ogg">
  </video>
</div>

Note: some browsers and devices will not allow autoplay in most cases. However, muted autoplay is always allowed. This particular example should be used for purely presentational videos, which do not have any sound.

Add the following attributes: muted, playsinline and autoplay, to let your video start playing automatically (but muted):

<div class="aspect aspect-16x9">
  <video autoplay muted playsinline>
    <source src="sample-video.mp4" type="video/mp4">
    <source src="sample-video.ogg" type="video/ogg">
  </video>
</div>

YouTube video

You can also embed a YouTube video using an <iframe>:

html

<div class="aspect aspect-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Aspect ratio

Notice that you can embed videos of various aspect ratios.

To adjust the video fit, you might want to use the object-fit utility.

<div class="aspect aspect-4x3">
  <video controls class="object-fit-cover">
    <source src="sample-video.mp4" type="video/mp4">
    <source src="sample-video.ogg" type="video/ogg">
  </video>
</div>

Video play/pause button

Easily integrate a play/pause button overlay on your video elements using the data-of-video-play attribute. This feature provides a user-friendly way to control video playback without the need for additional JavaScript.

<div class="aspect aspect-16x9" data-of-video-play>
  <video class="object-fit-cover">
    <source src="sample-video.mp4" type="video/mp4">
    <source src="sample-video.ogg" type="video/ogg">
  </video>
</div>

CSS

Variables

Video player use local CSS variables for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

src/scss/_player-video.scss

--#{$prefix}player-icon-size: #{$video-player-icon-size};
--#{$prefix}player-play-icon: #{escape-svg($video-player-icon-play)};
--#{$prefix}player-pause-icon: #{escape-svg($video-player-icon-pause)};

Sass variables

src/scss/_variables.scss

$video-player-icon-size: 3rem;
$video-player-icon-color: $primary;
$video-player-icon-play: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$video-player-icon-color}'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/>   <path d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z'/></svg>");
$video-player-icon-pause: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$video-player-icon-color}'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/>   <path d='M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0v-3.5z'/></svg>");