Cloudflare Docs
Stream
Cloudflare Docs
Stream
Search icon (depiction of a magnifying glass)
GitHub icon
Visit Stream on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Stream
  3. Examples
  4. Vidstack

Vidstack

Example of video playback with Cloudflare Stream and Vidstack

Run and edit this code in your browser on Stackblitz.

There’s a few options to choose from when getting started with Vidstack. Follow any of the links below that makes the most sense with your current setup:

​​ HTML

  1. Install the package:
npm i vidstack
  1. Import styles and custom elements:
import "vidstack/styles/base.css";

// the following styles are optional - remove to go headless.

import "vidstack/styles/ui/buttons.css";

import "vidstack/styles/ui/sliders.css";



import { defineCustomElements } from "vidstack/elements";



defineCustomElements();
  1. Add player markup:
<media-player
  src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
  poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
  controls
  aspect-ratio="16/9"

>
  <media-outlet></media-outlet>

</media-player>

You’re all setup! You can refer to the Vidstack documentation to continue getting started.

​​ React

  1. Install packages:
npm i vidstack @vidstack/react
  1. Setup player:
import "vidstack/styles/base.css";

// the following styles are optional - remove to go headless.

import "vidstack/styles/ui/buttons.css";

import "vidstack/styles/ui/sliders.css";



import { MediaPlayer, MediaOutlet } from "@vidstack/react";



function Player() {
  return (
    <MediaPlayer
      src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
      poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
      controls
      aspectRatio={16/9}
    >
      <MediaOutlet />
    </MediaPlayer>
  );

}

You’re all setup! You can refer to the Vidstack documentation to continue getting started.

​​ CDN

  1. Import stylesheets and scripts:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/base.min.css" />

<!-- the following styles are optional - remove to go headless -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/ui/buttons.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vidstack/styles/ui/sliders.min.css" />

<script type="module" src="https://cdn.jsdelivr.net/npm/vidstack/dist/cdn/prod.js"></script>
  1. Setup player:
<media-player
  src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
  poster="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/thumbnails/thumbnail.jpg"
  controls
  aspect-ratio="16/9"

>
  <media-outlet></media-outlet>

</media-player>

You’re all setup! You can refer to the Vidstack documentation to continue getting started.