Astro > 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.

Let's begin by defining our GraphQL query, which is necessary to retrieve data for the video player:

1
---
2
const query = `
3
  query HomeQuery {
4
    blogPost {
5
    title
6
    coverVideo {
7
      video {
8
        # required: this field identifies the video to be played
9
        muxPlaybackId
10

11
        # all the other fields are not required but:
12

13
        # if provided, title is displayed in the upper left corner of the video
14
        title
15

16
        # if provided, width and height are used to define the aspect ratio of the
17
        # player, so to avoid layout jumps during the rendering.
18
        width
19
        height
20

21
        # if provided, it shows a blurred placeholder for the video
22
        blurUpThumb
23
      }
24
    }
25
  }
26
`;
27
const data = await executeQuery(query);
28
---
29

30
<article>
31
  <h1>{data.blogPost.title}</h1>
32
  ...

The video player will be an Astro Island, pre-rendered on the server, and then re-hydrated on the client using client directives.

The UI framework for this island can be any among React, Vue, or SvelteKit, since we have developed a <VideoPlayer /> component for each of these choices. Choose based on your personal preferences.

For the purposes of this guide, we will choose React, and therefore we will install the react-datocms package:

npm install react-datocms

Now you can feed content coming from a video query directly into the <VideoPlayer /> component:

---
import { VideoPlayer } from '@datocms/react';

const query = `...`;

const data = await executeQuery(query);
---

<VideoPlayer data={data.blogPost.coverVideo.video} client:visible />

The client:visible prop is used to ensure that the component loads and hydrates once the component has entered the user’s viewport. However, you can choose any among the other client directives made available by Astro.