Content Video (Built on VideoJS)

A basic element for showing videos using VideoJS.

Examples

Standard Youtube Video

Showing a Youtube player with a play button that can be overriden via CSS.

Source

HTML

<content-video src="https://www.youtube.com/embed/XwwNwyQT8Dc"></content-video>

<link rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

content-video {
  max-width: 700px;
  margin: auto;
}

Standard Hosted Video + Subtitles

Showing a fully accessible video player with subtitles.

Source

HTML

<content-video src="/examples/content-video/video.mp4" method="html5">
  <content-image slot="poster" src="https://picsum.photos/seed/picsum/536/354"></content-image>
  <track kind="captions" src="/examples/content-video/captions.vtt" srclang="en" label="English" default>
  <track kind="captions" src="/examples/content-video/captions.vtt" srclang="fr" label="French">
</content-video>

<ink rel="stylesheet" href="./style.css">
<script type="module" src="/vendor/content-blocks/content-blocks/content-blocks.esm.js"></script>

CSS

content-video {
  max-width: 700px;
  margin: auto;
}