Remix Blog
Words are nice... but code speaks louder. Dive into a fully commented project template, showcasing these techniques (and more) in action.
Sorry, no results found for "".
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-datocmsThen, 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> );}