Remix

Displaying videos

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
}