# 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` 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`](https://github.com/datocms/react-datocms) that exposes a `` component and pairs perfectly with the video query.
To take advantage of it, install the [`react-datocms`](https://github.com/datocms/react-datocms) package:
Terminal window
```bash
npm install react-datocms
```
Then, inside your page, feed content coming from a `video` query directly into the `` component:
```tsx
import type { Route } from './+types/home';
import { load } from '~/lib/datocms';
import { VideoPlayer } from 'react-datocms';
const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
posts: allBlogPosts(first: $limit) {
id
title
coverVideo {
video {
muxPlaybackId
title
width
height
blurUpThumb
}
}
}
}`;
export async function loader() {
return load(HOMEPAGE_QUERY, {
variables: { limit: 10 },
});
}
export default function Home({ loaderData }: Route.ComponentProps) {
const { posts } = loaderData;
return (
{posts.map(blogPost => (
{blogPost.title}
))}