# Displaying videos

> [!PROTIP] 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](https://www.datocms.com/user-guides/media-management/videos-and-video-optimizations.md)
>     
> -   Why you should use HLS Streaming via Mux: [How to stream videos efficiently: Raw MP4 Downloads vs HLS Streaming](https://www.datocms.com/docs/streaming-videos/how-to-stream-videos-efficiently.md)
>     
> 
> 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`](https://www.datocms.com/docs/content-delivery-api/images-and-videos.md#videos) 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

```javascript
---
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](https://docs.astro.build/en/concepts/islands/), pre-rendered on the server, and then re-hydrated on the client using [client directives](https://docs.astro.build/en/reference/directives-reference/#client-directives).

The [UI framework](https://docs.astro.build/en/guides/framework-components/) for this island can be any among [React](https://github.com/datocms/react-datocms/blob/master/docs/video-player.md), [Vue](https://github.com/datocms/vue-datocms/tree/master/src/components/VideoPlayer), or [SvelteKit](https://github.com/datocms/datocms-svelte/tree/main/src/lib/components/VideoPlayer), 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`](https://github.com/datocms/react-datocms) package:

```plaintext
npm install react-datocms
```

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

src/pages/index.astro

```jsx
---
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](https://docs.astro.build/en/reference/directives-reference/#client-directives) made available by Astro.

## Related content in "Astro"

- [Astro + DatoCMS Overview](https://www.datocms.com/docs/astro.md)

- [Accessing draft/updated content](https://www.datocms.com/docs/astro/accessing-draft-updated-content.md)
- [Managing images](https://www.datocms.com/docs/astro/managing-images.md)

- [Displaying videos](https://www.datocms.com/docs/astro/displaying-videos.md)
- [Structured Text fields](https://www.datocms.com/docs/astro/structured-text-fields.md)

- [SEO Management](https://www.datocms.com/docs/astro/seo-management.md)
- [Real-time updates](https://www.datocms.com/docs/astro/real-time-updates.md)

- [Visual Editing](https://www.datocms.com/docs/astro/visual-editing.md)
- [Astro Starter Kit    
Words are nice... but code speaks louder. Dive into a fully commented project template,
            showcasing these techniques (and more) in action.
       ✅ Official](https://www.datocms.com/marketplace/starters/astro-starter-kit.md)