YouTube

The YouTube extension lets you fetch YouTube videos from your account and display them on your entry page. So when you create an entry, you can select only one of the listed videos at a time as the input for that field, and the details of the video will be saved in JSON format 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

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 (more details in Step 3).

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.

3. Add the “YouTube” custom field extension to your stack

   1. Go to your stack, navigate to the “Settings” gear icon, and select Extensions.
   2. On the Extensions page, click on the + Add Extension button, and select Create new. If you have not added any extensions in the stack yet, click on the create a new one link as shown below.
   3. In the Select Extension Type window, select Custom Field.
      
   4. On the Create New Extension page, enter values in the fields as given below:
      
      • Title (required): Provide a suitable title, for example “Youtube,” for your custom field. This title will be visible when you select the extension in the custom field in your content type.
        
      • Field data type (required): Select the data type in which the input data of the field should be saved in Contentstack. In this case, select JSON.
      • Multiple (optional): Leave this field unchecked.
      • Hosting method (required): Select Hosted by Contentstack as the hosting method for this content type.
      • Extension source code (required): In this field, you need to enter the extension code. Download the source code for the extension and paste it in this field.
      • Config Parameter (required): 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"
        }

   5. Save the custom field.

4. Use your custom field

   Once you have added a custom field, you can use it in your content type like any other field. To add a custom field in your content type, perform the following steps:

   1. Create a content type and add the Custom field to it.

   2. Under Select Extension, select the “Youtube” field that you created and set the other properties. You can add other fields as per requirements.

      
   3. Finally, click on either Save or Save and Close to save your changes.
   4. Next, create an entry for this content type, and you will see the Youtube field in action. Click the Choose Video button to display all the videos of the specified channel ID as follows:
   5. After clicking Choose Video, it displays all the videos of the specified channel ID as follows:
   6. Finally, select the video that you want:
      
      

Additional Resource: You can also refer to our other documents on custom video extensions such as Ooyala, Brightcove, and Vimeo.