Embedding a youtube video in markdown field in Netlify CMS

Question

I'm developing a site that uses Next.js (static/pre-rendered) with Netlify CMS as a way to manage content, and also run the blog.

For each blog post, I have a few fields such as title, author etc that are string fields, and I have a markdown field with rich text from a WYSIWYG editor for the whole content of my posts, allowing the contributor to choose the structure of the post, add images etc.

I need to be able to embed youtube videos within that rich text (the contributor needs to be able to add the video wherever they want within the post). Any idea how I could do this?

Thanks

Answer 1

If you want to make it easy, you can suggest your team just embed the youtube video straight in Markdown, I would be parsed properly with dangerouslySetInnerHTML.

Get this code by right click on the video:

<iframe width="1680" height="690" 
src="https://www.youtube.com/embed/DyY9Wpfajqo" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
gyroscope; picture-in-picture" allowfullscreen></iframe>

To embed video into Text Editor you need to create a Custom Widget, the recipe you can find here:

https://www.netlifycms.org/docs/custom-widgets/