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) {idtitlecoverVideo {video {muxPlaybackIdtitlewidthheightblurUpThumb}}}}`;export async function loader() {return load({query: 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>);}