---
title: "Video Block Demo"
description: "Base setup on top of headless services to help you get started quickly"
language: "English"
url: "https://head-start.pages.dev/en/demos/video-block-demo/"
---

Copy page

* [Open in Claude ](https://claude.ai/new?q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fvideo-block-demo%2F+and+explain+it+to+me.)
* [Open in ChatGPT ](https://chatgpt.com/?hints=search\&q=Read+from+this+URL%3A+https%3A%2F%2Fhead-start.pages.dev%2Fen%2Fdemos%2Fvideo-block-demo%2F+and+explain+it+to+me.)

# Video Block Demo

!Note: this piece of documentation is auto-generated from [blocks/VideoBlock/README.md](https://github.com/voorhoede/head-start/tree/main/src/blocks/VideoBlock/README.md).

**Renders a video uploaded in DatoCMS with a cover image, caption, support for subtitles and options to autoplay, mute and loop.**

## Features

* Privacy first alternative to [Video Embed Block](https://github.com/voorhoede/head-start/tree/main/VideoEmbedBlock/), as video uploaded in DatoCMS is served without tracking (no consent required).

* Supports video streaming with adaptive bitrate (using HLS) for best UX and performance.

* Fallback to mp4 video when streaming is not available.

* Fallback to video download link when HTML video element is not supported.

* Supports subtitle tracks for enhanced accessibility, automatically selecting default locale when available.

* Supports figcaption defaulting to external video's title and optional custom title override.

* Supports autoplay, mute and loop.

* Autoplay is only triggered if no reduced motion is preferred (for a11y) and save data mode is off.

* Conditionally loads video and streaming package (`hls.js`) on click or when in view in case autoplay is enabled.

[![](https://image.mux.com/hGATQLZt02d2w01aiOk7PY4c2kfgl3GpOG/thumbnail.jpg) ](https://stream.mux.com/hGATQLZt02d2w01aiOk7PY4c2kfgl3GpOG/low.mp4) [![](https://image.mux.com/hGATQLZt02d2w01aiOk7PY4c2kfgl3GpOG/thumbnail.jpg)](https://stream.mux.com/hGATQLZt02d2w01aiOk7PY4c2kfgl3GpOG/low.mp4)

Big Buck Bunny

[![This is some extra text](https://image.mux.com/mMjHU1GvHqwtVWXDULCwvLvHRXzQRXhe/thumbnail.jpg) ](https://stream.mux.com/mMjHU1GvHqwtVWXDULCwvLvHRXzQRXhe/high.mp4) [![This is some extra text](https://image.mux.com/mMjHU1GvHqwtVWXDULCwvLvHRXzQRXhe/thumbnail.jpg)](https://stream.mux.com/mMjHU1GvHqwtVWXDULCwvLvHRXzQRXhe/high.mp4)

This is an title/caption