# 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:
```jsx
import { load } from "~/lib/datocms";
import { VideoPlayer } from "react-datocms";
import { useLoaderData } from "remix";
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() {
const { posts } = useLoaderData();
return (
{posts.map(blogPost => (
{blogPost.title}
))}