Video

Displays a video element.

Frontmatter

blocks:
  - type: video
    heading: {} # (optional)
      surtitle: '' # string (optional)
      title: '' # string (optional)
      text: '' # markdown (optional)
    video: {}
      mp4: '' # video url (optional)
      webm: '' # video url (optional)
      mp4_mobile: '' # video url, a lighter source for phones (optional)
      webm_mobile: '' # video url (optional)
      poster: '' # image url (optional)
      controls: false # boolean (optional)
      autoplay: false # boolean (optional)
      loop: false # boolean (optional)
      muted: true # boolean, muted unless explicitly set to false (optional)
      screenshot: false # boolean, frames the video in a fake browser (optional)
      legend: '' # string (optional)
      credit: '' # markdown (optional)
      transcription: '' # markdown (optional)
    ui: {} # (optional)
      theme: '' # [accent, black, dark, highlight, light, neutral, white] (optional)
      grid: '' # [xsmall, small, medium, large, container, full] (optional)
      offset: '' # [start, center, end] (optional)
      align: '' # [start, center, end] (optional)

An autoplaying video with no controls gets a play/pause button of its own, which is what WCAG asks for. The sources are lazy-loaded, and a *_mobile source is swapped in on small screens.

See Common keys for heading, footing and the full ui reference.

Demo visual renderer

Files

CMS availability

CMS	Hugolify Admin v2
CloudCannon	Available
Decap CMS	Available
Netlify CMS	Available
Pages CMS	Available
Static CMS	Available
Sveltia CMS	Available
Tina CMS	Available