How to customize preview for array of objects with grid layout in Sanity?

Based on the documentation about preview configuration, when you're using options.layout: 'grid' on an array of objects, the grid tiles display based on the preview configuration you define on your object type schema.

For your video field to appear in the grid tile, you need to add a preview configuration to your object type definition. Here's how to set it up:

{
  name: 'yourObjectType',
  type: 'object',
  fields: [
    {
      name: 'video',
      type: 'file', // or 'mux.video' if using Mux
    },
    // your other fields...
  ],
  preview: {
    select: {
      title: 'title', // or whatever field you want as the title
      media: 'video', // this tells Sanity to use the video field for the media preview
    },
    prepare({title, media}) {
      return {
        title: title || 'Untitled',
        media: media, // the video will be used as the thumbnail
      }
    }
  }
}

The key points from the preview configuration documentation:

1. select object: Specifies which fields to extract - set media: 'video' to pull your video field
2. prepare function: Transforms the selected data before display - return an object with title, subtitle (optional), and media

If you want to show additional information, you can also add a subtitle:

prepare({title, media, duration}) {
  return {
    title: title || 'Untitled Video',
    subtitle: duration ? `${duration}s` : 'No duration',
    media: media
  }
}

The grid layout will then display your video thumbnail (or a file icon if no thumbnail is available) along with the title and any subtitle you configure. This works for arrays of objects when you set options: { layout: 'grid' } on the array field itself.

You can also provide a fallback icon if the video doesn't have a thumbnail by using the nullish coalescing operator in your prepare function, as shown in this guide on creating richer array item previews.