Using Sanity.io for Video-Rich Content Models

element. By placing the videoUrl inside the src attribute of the tag, the browser can stream and play the video directly. Example JSX :

The controls attribute enables built-in playback options like play, pause, and volume. This setup allows seamless integration of Sanity-hosted videos into client-side components. Referencing Videos in Other Content Types Sanity allows you to create relationships between different content types using references. This is useful when you want to associate a video with another document—such as embedding a video in a blog post, lesson, or product page—without duplicating the video data. Example Field in Another Schema: { name: 'videoReference', type: 'reference', to: [{ type: 'video' }] } By adding a reference field like this, you can link a single video document to multiple other documents. This approach improves content reusability and makes updates easier, since changes to the video document are reflected wherever it’s referenced. Querying Referenced Videos with GROQ When a video is referenced in another document, such as a lesson or blog post, you can use GROQ to follow that reference and extract fields from the linked video document. This is done using the -> dereferencing operator, which allows you to access nested data from the target document. Example: *[_type == 'lesson']{ title, videoReference->{ title, 'url': videoFile.asset->url } } In this query: It selects all documents of type 'lesson'. It retrieves the lesson's title. It follows the videoReference to get the referenced video's title and url . This approach is efficient for displaying related video content directly alongside other structured data in your frontend. Structuring Video Metadata To make your video content more searchable and organized, you can extend the video schema with additional metadata fields. These fields support advanced filtering, categorization, and content display logic in frontend applications. Optional Fields: categories: An array field used to assign tags or references for grouping videos by topic, genre, or purpose. resolution: A string or number field (e.g., '1080p') that helps identify the video quality or format. isFeatured: A boolean value used to flag specific videos for special placement, such as highlighting on the homepage or in a curated list. Adding these fields gives you more flexibility when building filters, organizing media, or applying conditional rendering based on metadata. Best Practices Use File Type Validation In your schema, restrict uploads to video MIME types to prevent incorrect uploads. Reference Instead of Embedding Use references for reusability instead of duplicating video fields in multiple content types. Organize Videos by Purpose Maintain consistent naming and use fields like category or tags for better organization. Avoid Oversized Uploads in Studio For large files, consider uploading externally and storing URLs in a url field instead of using the file upload field.

Boost Campaign Performance Through Video