Search

Learn how to embed Youtube or Vimeo videos in Contentful rich text fields

Teams with video content distributed across multiple platforms need ways to link it back to their Contentful projects. This article will show you how to embed Youtube or Vimeo videos in Contentful rich text fields with just a bit of content modeling.


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 best way to add videos hosted on YouTube or Vimeo is by creating a content type that can hold the YouTube or Vimeo video ID.


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.


Traditional CMS options let you embed UI elements out of the box, but Contentful doesn't.


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.


There's a process you can follow to make Contentful work for your team specifically


It's called the Waterfall method.


Teams I've worked with that follow this process were far more likely to set up a successful Contentful project than those who didn't.


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.