New Contentful integration: Adding video to your site just got even easier

At api.video, our goal is to make the process of working with video seamless. Principally, we do that via our APIs that make it really simple to encode, store, and deliver video worldwide. Another aspect, however, is that we need to make those APIs as accessible as possible via the tools that your company might already be using.

Today, we're pleased to announce our new app on the Contentful marketplace. Our app makes it easy to bring video content to your websites and apps via Contentful and gives your entire team access to our powerful video APIs (check out our API documentation) right from the Contentful user interface.

In this post, we'll do a quick walkthrough on how to connect your api.video account to Contentful.

All you'll need is:

1. A free Contentful account
2. An api.video API key (Get a free sandbox key here)

Installing the api.video app in Contentful

Log into your Contentful account and add the api.video app by clicking "Apps" and then "Manage apps" in the main nav bar.

Input your api.video API key first. You'll also notice that there is a list of your JSON objects are listed. The api.video app is meant to be connected to JSON object types in Contentful. If you don't see any objects listed, that's ok, we'll add a JSON object in the next step.

Adding api.video to content models

In this section we'll add api.video to 2 different content models:

1. A new JSON object
2. Add it to the Component:Video Object

A new JSON object

In the top menu, select "Content Model", and a new page will open with all the models/components in your app. Choose the "Add content type" button on the top right to begin creating a new type:

You'll be asked to name your model:

The UI will walk you through adding fields. Click the blue button to add a field, and then add a JSON Object. You'll be asked to name the field - choose a name that reminds you that it is an api.video object that is being added.

Click the "Create and Configure" button, and under "Appearance" choose api.video:

You may want to create a second field so that all items created with this object have a title. Create a new field, text, Short text, and when you configure the item, click the "Entry title" button. (If you do not add this step, every object you add will be named "Untitled" which is less than ideal.)

Your new component model now appears as an item to add when composing a page:

Modifying the Component:video model

Contentful has a built in video model that you can add the api.video app to. Let's walk through the steps to do that.

In the "Content Model" section, click on the "Component:Video" model. This will give you a page that shows all the fields in the model. By default, it has 2 fields, the title, and a YouTube Video Id. We'll modify this so that you can still use a YouTube video Id, but you can also add an api.video object.

Add the api.video object

Click the "add field" button on the right. Add a JSON object, and name the field "apivideo" or another term that helps you remember where the videos will be stored. Click the "Create and Configure" button, and then under Appearance, add the api.video app.

Edit the YouTube object

The Component:Video model is designed to only work with YouTube, and one of the settings is that the YouTube video Id is required. We're making this model more flexible (YouTube AND api.video), so we need to remove this requirement. Click the settings button, and under "Validation" you'll uncheck the "Required field" checkbox

With these changes, we are now ready to save the Component:video model.

Adding api.video videos to Contentful

The process is very similar - no matter which type of object you created in the last step.

Using the Content section

In the top menu, choose content, and then pick the model you wish to use (in the screenshots, I've used the Component:Video model.

The title is 'My Awesome video', and I'm skipping the YouTube section - it's no longer required! With the api.video app, you can choose a video already uploaded to api.video ("select an existing video"), or upload a new video (descriptively named "upload a new video").

If you choose an existing video, you can search through your api.video library by title, making video discovery easy.

Now just publish the content, and you've added the video for playback!

You can also add the content model in a page you are building and follow the same steps to add an api.video to your site.

With the "upload a video" option - you'll get the option to upload a video from your local drive. The app will upload the video to api.video, and then show it in the window when it is ready to play.

Conclusion

We're super excited to see what folks will build with api.video and Contentful. If you're looking for an easy way to integrate video into your application - give our integration a try with the api.video app.

Questions? Our documentation has more details. Or, feel free to ask a question with the chat button, or check out our community forum.