Remix > 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 { load } from "~/lib/datocms";
    import { VideoPlayer } from "react-datocms";
    import { useLoaderData } from "remix";
    const HOMEPAGE_QUERY = `query HomePage($limit: IntType) {
    posts: allBlogPosts(first: $limit) {
    coverVideo {
    video {
    export async function loader() {
    return load({
    query: HOMEPAGE_QUERY,
    variables: { limit: 10 }
    export default function Home() {
    const { posts } = useLoaderData();
    return (
    { => (
    <article key={}>
    <VideoPlayer data={} />