Integrating video in Sanity using Mux Input and Vime/Youtube plugins
9 replies
Last updated: Nov 28, 2022
R
Hey everyone! Whats the best way to integrate video? It seems the
mux-studio-pluginhas a lot of bugs currently (causes the studio to crash/I am unable to delete videos).. Perhaps its easiest to just have a field pointing to a URL and then pass that within a
videotag?
fields: [
{
name: 'vimeoUrl',
title: 'Vimeo Video URL',
type: 'url'
}
]Oct 14, 2022, 10:15 PM
That is one possible way! But I will note that the Mux Input plugin got some love this week to address some of the issues it's had. The most recent version should perform better.
Oct 14, 2022, 10:22 PM
J
Hi, I’m using Vime for videos (YouTube, Vimeo or manually uploaded mp4 file).
Here’s the schema of the object:
You need to install:
For YouTube just replace “Vimeo” with “Youtube”
Here’s the schema of the object:
import { TbBrandVimeo } from "react-icons/tb";
import React from 'react';
import getVideoId from 'get-video-id'
import { Vimeo, Player } from '@vime/react';
const VimeoPreview = ({value}) => {
const { url } = value;
const id = getVideoId(typeof url === 'string' ? url : '')?.id;
if (!value || !url || !id){
return <div>Vimeo Video (double click to add URL)</div>
}
return (
<div id="vimeo-container">
<Player controls>
<Vimeo videoId={id} />
</Player>
</div>
);
}
export default {
name: 'vimeo',
title: 'Vimeo',
type: 'object',
icon: TbBrandVimeo,
fields: [
{
name: 'url',
type: 'url',
title: 'Vimeo video URL'
}
],
preview: {
select: {
url: 'url'
},
component: VimeoPreview
}
}@vime/core @vime/react get-video-id
Oct 14, 2022, 10:26 PM
R
user M
Okay thank you for letting me know.. I will upgrade and check it out. user S
that example really helps me out thank you for posting that 💯Oct 16, 2022, 9:57 PM
J
Hei, just wondering how do you show video to the page from PortableText, just not working from my side
Nov 26, 2022, 1:11 AM
J
const components = {
types: {
image: ({ value }: { value: ImageWithAlt }) => {
return (
<Image src={value} width={400} quality={1} style={{ borderRadius: 12 }} height={225} />
);
},
},
video: ({ node }: MediaProps) => {
const { url } = node;
const id = getYouTubeId(url);
console.log('get youtube id -> ', id)
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<p> video rendered here</p>
<YouTube videoId={id ?? undefined} opts={youtubeOptions} />
</div>
);
},
};
function PortableText({ value }: PortableTextProps) {
console.log('value -> ', value)
return <OriginalPortableText value={value} components={components} />;
}
export default PortableText;Nov 26, 2022, 1:13 AM
J
const components = { types: { image: ({ value }: { value: ImageWithAlt }) => {return (
<Image src={value} width={400} quality={1} style={{ borderRadius: 12 }} height={225} />);
},
},
video: ({ node }: MediaProps) => { const { url } = node; const id = getYouTubeId(url);
console.log('get youtube id -> ', id)return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}><p> video rendered here</p>
<YouTube videoId={id ?? undefined} opts={youtubeOptions} /></div>
);
},
};
function PortableText({ value }: PortableTextProps) {console.log('value -> ', value) return <OriginalPortableText value={value} components={components} />;}
export default PortableText;
Nov 26, 2022, 1:13 AM
F
user S
user S
does that still work for you with the v3? I don't see any preview with that code 🤔Nov 28, 2022, 12:31 PM
J
Works fine for me. If you manually paste a random youtube iframe embed code instead of the video-container code from above, does that show for you in the preview?
Nov 28, 2022, 2:39 PM
F
user S
neither a Youtube URL nor a Youtube iframe actually, nothing shows up hahaNov 28, 2022, 4:03 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.