Vanilla React > Displaying videos

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.

To make it easy to offer optimized, progressive videos on your projects, we offer a package called react-datocms that exposes a <VideoPlayer /> component and pairs perfectly with the video query.

To take advantage of it, install the react-datocms package:

npm install react-datocms

Then, inside your page, feed content coming from a video query directly into the <VideoPlayer /> component:

import { VideoPlayer } from "react-datocms";
import { performRequest } from '../lib/datocms';
const PAGE_CONTENT_QUERY = `query HomePage($limit: IntType) {
allBlogPosts(first: $limit) {
id
title
coverVideo {
video {
muxPlaybackId
title
width
height
blurUpThumb
}
}
}
}`;
export default async function Home() {
const pageContent = await performRequest({
query: PAGE_CONTENT_QUERY,
variables: { limit: 10 },
});
return (
<div>
{data.allBlogPosts.map(blogPost => (
<article key={blogPost.id}>
<VideoPlayer data={blogPost.coverVideo.video} />
<h2>{blogPost.title}</h2>
</article>
))}
</div>
);
}