Cincopa Preview

Adding video uploads as fields within Sanity documents enhances content by enabling seamless media integration. By leveraging Sanity Studio"s schema definitions, the built-in asset pipeline, and frontend rendering, you can create flexible and dynamic content models that incorporate videos effortlessly. This approach streamlines video management, simplifies the content creation process for editors, and allows for customizable, extensible schemas that grow with your project"s needs.

Prerequisites

  • Set Up the Sanity Studio Using this Guide → Sanity Installation
  • Basic understanding of Sanity schema definitions and how to modify them.
  • Node.js and npm are installed for running and building Sanity Studio.
  • Optional: a connected frontend application (such as Next.js or Remix) for displaying videos uploaded to Sanity.

Define a Custom Video Block Schema for File Uploads

Sanity supports a native file type to upload any file type, including video files. To create a video upload block:

Step 1: Open the schemaTypes folder in your Sanity Studio project.

Step 2: Create a new file named video.ts (or .js if using JavaScript).

Step 3: Define a schema using Sanity's file type and restrict it to video formats.

Example:

code
export default {
name: 'video',
title: 'Video',
type: 'object',
fields: [
{
name: 'videoFile',
title: 'Video File',
type: 'file',
options: {
accept: 'video/*', // Accept only video formats for upload
},
validation: Rule => Rule.required() // Make video upload required if desired
},
{
name: 'title',
title: 'Title',
type: 'string',
validation: Rule => Rule.required()
},
{
name: 'description',
title: 'Description',
type: 'text',
rows: 3
}
]
}

This schema enables uploading video files directly from the device, with additional metadata fields for title and description.

Add the Video Block to Your Document Schema's Content Array

Open the main document schema where you want to include video content blocks, such as post.ts or a similar file in schemaTypes. You will typically have a field like:

code
{
name: 'content',
title: 'Content',
type: 'array',
of: [
{ type: 'block' } // text blocks
]
}

Modify it to include your custom video block type:

code
import video from './video'

export default {
// ...other schema properties...

fields: [
{
name: 'content',
title: 'Content',
type: 'array',
of: [
{ type: 'block' },
video // Add video block here
]
}
],
}

Also, make sure to import your video schema into your main schema entry point, where all schema types are combined.

Banner for Video Embedding

Restart Sanity Studio and Test Upload

Step 1: Save the changes to your schema files.

Step 2: Stop and restart your Sanity Studio server (sanity start command).

Step 3: Open the Studio in your browser and navigate to the document type where this block is added.

Step 4: In the rich text editor, add a new video block by selecting your custom "Video" block from the insert options.

Step 5: Upload a video file directly from your device using the file selector.

Step 6: Provide optional title and description metadata.

Render Uploaded Videos in Your Frontend Application

Sanity stores uploaded video files as assets that include URLs for fetching. Your frontend app needs to recognize the video block type and render the uploaded video accordingly. Example in React with a Portable Text serializer:

code
const serializers = {
types: {
video: ({ node }) => {
const videoUrl = node.videoFile.asset.url;
return (
<div>
{node.title && <h3>{node.title}</h3>}
<video controls width="600" src={videoUrl} />
{node.description && <p>{node.description}</p>}
</div>
);
}
}
};

Pass this serializers object to your Portable Text component rendering Sanity content.