Remix

Displaying videos

Pro tip: Start with our how-to guides first

If you're new to hosting videos on DatoCMS, we recommend first starting with our tutorials:

How to upload videos: Videos and Video Optimizations
Why you should use HLS Streaming via Mux: How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming

Then, this page provides framework-specific playback advice using our helper components. Read on when you're ready!

One of the advantages of using DatoCMS instead of other content management systems is its video query, which will return pre-computed video attributes that will help you display videos in your frontend without any additional manipulation.

To make it easy to offer optimized, progressive videos on your projects, we offer a package called react-datocms that exposes a <VideoPlayer /> component and pairs perfectly with the video query.

To take advantage of it, install the react-datocms package:

npm install react-datocms

Then, inside your page, feed content coming from a video query directly into the <VideoPlayer /> component:

1
import { load } from "~/lib/datocms";
2
import { VideoPlayer } from "react-datocms";
3
import { useLoaderData } from "remix";
4

5
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
6
  posts: allBlogPosts(first: $limit) {
7
    id
8
    title
9
    coverVideo {
10
      video {
11
        muxPlaybackId
12
        title
13
        width
14
        height
15
        blurUpThumb
16
      }
17
    }
18
  }
19
}`;
20

21
export async function loader() {
22
  return load(HOMEPAGE_QUERY, {
23
    variables: { limit: 10 }
24
  });
25
}
26

27
export default function Home() {
28
  const { posts } = useLoaderData();
29
  return (
30
    <div>
31
      {posts.map(blogPost => (
32
        <article key={blogPost.id}>
33
          <VideoPlayer data={blogPost.coverVideo.video} />
34
          <h6>{blogPost.title}</h6>
35
        </article>
36
      ))}
37
    </div>
38
  );
39
}