Next.js

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 { VideoPlayer } from "react-datocms";
2
import { performRequest } from '../lib/datocms';
3

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

20
export default async function Home() {
21
  const pageContent = await performRequest(PAGE_CONTENT_QUERY, {
22
    variables: { limit: 10 },
23
  });
24

25
  return (
26
    <div>
27
      {data.allBlogPosts.map(blogPost => (
28
        <article key={blogPost.id}>
29
          <VideoPlayer data={blogPost.coverVideo.video} />
30
          <h2>{blogPost.title}</h2>
31
        </article>
32
      ))}
33
    </div>
34
  );
35
}