YouTube Extension Setup Guide

The YouTube extension lets you fetch YouTube videos and display them into a field in your content type. Subsequently, while creating entries, content managers can select only one of the listed videos at a time as the input value for that field, and the details of the video will be saved as JSON in Contentstack.

This step-by-step guide explains how to create a YouTube custom field extension for your content types in Contentstack.

  1. Get YouTube API key
  2. Get Channel ID
  3. Add the ‘YouTube’ custom field extension to your stack
  4. Use your custom field

Step 1 - Get YouTube API key

In order to set up this extension, you will need the API key of your YouTube account. Refer to this video to learn how to get your YouTube account’s API key. 

Note down the API Key, as you will need it while configuring this extension in Contentstack (mode details in Step 3).

Step 2 - Get Channel ID

While configuring the extension (in Step 3), you will also need to specify the ID of the channel of which you want to fetch and display the videos. 

Note: You can display videos of any public channels. They don’t have to necessarily be yours.  

Each YouTube channel has a unique ID. Let’s understand how to get this ID:

  1. Visit the home/landing page of the YouTube channel of your choice on a browser.
  2. You will see the channel ID in the URL, after the ‘channel/’ part. For example, if the URL is https://www.youtube.com/channel/ABc1d2E3FgHIj4K-lmnoPQ, then the channel ID is ABc1d2E3FgHIj4K-lmnoPQ.

Step 3 - Add the ‘YouTube’ custom field extension to your stack

  1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create new.
    Create New Extension.png
  2. Select Custom Field.
    Select Extension Type - Custom Field.png
  3. On the configuration page, enter details in the fields as given below:
    • Title - Provide a suitable title. For example, YouTube.
    • Field data type - Select the data type in which the input data of the field should be saved in Contentstack. Select JSON in this case, since it saves the selected video’s details.
    • Multiple: Select this checkbox if you want to enable multiple inputs for the field.
    • Hosting method - Select Hosted By Contentstack. As soon as you do this, you will see the Extension Source Code field below.
    • Extension source code - Enter the source code for the extension. You can find the source code for the YouTube extension here.
    • Config Parameter - Provide values for the config parameters api_key and channel_id that you received in step 1 and step 2, respectively.

      Enter the configuration details as shown below:
      {
        "api_key": "x82XXXXXrtMMMMMMMMMMMmf4GmCCCCCCCCC",
        "channel_id": "cadUC8TXXVWEFWEFdef-nuSDFSFDSuWAads"
      }
  4. Click on Save. This creates your custom field.

Now, let’s understand how you can start using this custom field in your content type.

Step 4 - Use your custom field

To use your custom field, you need to follow the steps given below:

  1. Create a content type by clicking on the + New Content Type. Enter the relevant details for the content type and click on Create and Add fields.
    Create Content Type.png
    This leads you to the Content Type Builder page where you can add the relevant fields.
  2. Add the Custom field in your content type.
    Add 'Custom' Field.png
  3. Select YouTube from the dropdown and set the other properties of your custom field.
    Select 'YouTube' from dropdown.png

    Note: You can provide specific instance-level configuration settings for your Custom Field extension. Learn more.

  4. Click on Update.
    Click on Update.png
  5. After adding other relevant fields in your Content Type, click on Save and Close.

This will create your content type. Now, go to the content type and create a new entry. You can see the custom field while creating an entry for this content type as shown below. Click on Choose Video:

Click on 'Choose Video'.png

This displays all the videos of the specified channel ID as follows:

Videos of the specified channel ID is displayed.png

Finally, select the video that you want:

Select the video that you want.png

Was this article helpful?
top-arrow