Issue with adding a custom video block to a portable text field in

5 replies
Last updated: Sep 10, 2021
I’m trying to add a custom video block to a portable text field. I’ve been following this tutorial:
I’m trying to broaden the block to allow for Vimeo URLs in addition to YouTube URLs. So instead of
, I’d like to use
I’ve deployed my efforts to my studio, but when I try to add the block in my rich text field, my ‘Desk’ tool immediately crashes (even before I can add a video link) and gives me the following error:

TypeError: get-video-id expects a string
I’ve stared at my code, but it really seems like it should work as well as the code in the tutorial.

Code in the thread…
Sep 1, 2021, 7:33 PM
Here is my `video.js`:

// video.js
import React from 'react'
import getVideoId from 'get-video-id'
import ReactPlayer from 'react-player'

const Preview = ({value}) => {
  const { url } = value
  const id = getVideoId(url)
  return (<ReactPlayer url={id} />)

export default {
  name: 'video',
  type: 'object',
  title: 'Video Embed',
  fields: [
      name: 'url',
      type: 'url',
      title: 'Video URL',
      description: 'Paste a video URL, ideally from YouTube or Vimeo.'
  preview: {
    select: {
      url: 'url'
    component: Preview
There must be
something I’m missing. Any thoughts?
Sep 1, 2021, 7:34 PM
user A
. I’m not wedded to ReactPlayer by any means. I was just using it because the tutorial used it. 🙃
What you say makes sense to me. It seemed to work in the tutorial, but maybe that’s a difference between
? 🤷‍♂️
Your code works nicely. Thanks so much!
Sep 1, 2021, 9:26 PM
Great to hear, Matt! Glad you got that working. 🙂
Sep 1, 2021, 9:58 PM
Looks good in Sanity, anyways. Now I’m trying to figure out how to serialize it in 11ty.
Probably should have chosen a simpler block as my first attempt at custom blocks.
Sep 1, 2021, 10:00 PM
9 days later… still trying to figure out the serialization. sigh
Sep 10, 2021, 5:16 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?