Remix > 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 { 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 (
    <div>
      {posts.map(blogPost => (
        <article key={blogPost.id}>
          <VideoPlayer data={blogPost.coverVideo.video} />
          <h6>{blogPost.title}</h6>
        </article>
      ))}
    </div>
  );
}