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:

---
// src/pages/index.astro
const query = `
  query HomeQuery {
    blogPost {
    title
    coverVideo {
      video {
        # required: this field identifies the video to be played
        muxPlaybackId
  
        # all the other fields are not required but:
  
        # if provided, title is displayed in the upper left corner of the video
        title
  
        # if provided, width and height are used to define the aspect ratio of the
        # player, so to avoid layout jumps during the rendering.
        width
        height
  
        # if provided, it shows a blurred placeholder for the video
        blurUpThumb
      }
    }
  }
`;
const data = await executeQuery(query);
---
<article>
  <h1>{data.blogPost.title}</h1>
  ...

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:

---
// src/pages/index.astro
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.