<figure>
  <video width="500" controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
    </source>
    <p>
      Your browser doesn't support HTML video. You can
      <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" download="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">download the video</a> instead.
    </p>
  </video>
  <figcaption>Basic video HTML</figcaption>
</figure>

<figure>
  <video width="500" controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4#t=0.001">
    </source>
    <p>
      Your browser doesn't support HTML video. You can
      <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" download="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">download the video</a> instead.
    </p>
  </video>
  <figcaption>Basic video HTML with setting #t=0.001 to skip the first millisecond of the video</figcaption>
</figure>

<figure>
  <video width="500" poster="https://www.sitelint.com/lab/video-ios/assets/poster.jpg" controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
    </source>
    <p>
      Your browser doesn't support HTML video. You can
      <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" download="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">download the video</a> instead.
    </p>
  </video>
  <figcaption>Basic video HTML with defined poster</figcaption>
</figure>

<figure>
  <video width="500" playsinline autoplay muted loop controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
    </source>
    <p>
      Your browser doesn't support HTML video. You can
      <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" download="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">download the video</a> instead.
    </p>
  </video>
  <figcaption>Basic video HTML with defined playsinline, autoplay, muted and loop</figcaption>
</figure>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

figure {
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  margin: 0 0 1rem;
  max-width: 100%;
  padding: 2px;
  width: 400px;
}

figure video {
  display: block;
  margin-bottom: 1rem;
  max-width: 100%;
}

figure figcaption {
  display: block;
  margin-bottom: 0.5rem;
  text-align: center;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.