Connor Rowland
Sep 22, 2021
Updated: Mar 1, 2022
Embedding videos hosted on YouTube or Vimeo in Contentful isn't as obvious as doing something like adding an image or basic text field to a page. But the method for achieving this isn't as difficult as it may seem.
A question I've heard Contentful users ask frequently is something along the lines of:
Is it possible to embed a Youtube or Vimeo video directly into the Rich Text Content-Type? If not, what is the best practice for allowing a user of Contentful to add videos to blog posts for example?
The video ID is provided when you click the Share button on a YouTube or Vimeo video; it's the characters after the slash:
https://youtu.be/_4kHxtiuML0 < this is the id https://vimeo.com/606811537
Your content model should be designed to have a few fields, namely:
Component Name - Short text
This makes it easy for you to find your content items. This field should be in every one of your content types.
Check off "This field represents the Entry title" under Field options within the field settings.
YouTubeID: Short text
VimeoID: Short text
Then, you can have your front end set up to render a video from the ID provided.
You can even extend this content type to allow content authors to feature a custom video thumbnail, or adjust the video's start time.
You may be struggling to come up with a straightforward way to add different UI layouts to the Contentful rich text editor, amongst other challenges associated with using a headless CMS.
Working with a traditional CMS is tough, and using a headless CMS promises a better way. Making the switch to a headless CMS is an opportunity to make a CMS work for you specifically.
It's called the Waterfall method.
Why? Because the process uses your current challenges to inform a vision their entire team can work towards, and make Contentful the tool to pull it all together.