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

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: https://www.sanity.io/guides/portable-text-how-to-add-a-custom-youtube-embed-block
I’m trying to broaden the block to allow for Vimeo URLs in addition to YouTube URLs. So instead of
get-youtube-id
, I’d like to use
get-video-id
.
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
Thanks,
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
get-youtube-id
and
get-video-id
? 🤷‍♂️
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 https://sanity-io-land.slack.com/archives/C011JM8R0HM/p1631293800014700
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?