X
Back to main site

YouTube App Installation Guide

YouTube is a video-sharing service where users can watch, upload, create their own videos, like, and comment on other videos.

Contentstack Marketplace lets you embed and display the information of any YouTube channel directly into the CMS environment by just providing a channel ID. This saves the content managers' time and eliminates the potential errors caused by manual data insertion.

Prerequisites

This step-by-step guide explains how to install and configure YouTube within your stack.

Steps for Execution

  1. Get YouTube API key
  2. Get Channel ID
  3. Install and Configure YouTube in Contentstack Marketplace
  4. Use YouTube within your Stack

  1. Get YouTube API key

    In order to set up this extension in Contentstack, you will need the YouTube API key.
    Follow the steps to get your YouTube API key.

    1. Sign in to Google Console Cloud to go to API’s & Services.
    2. Click SELECT PROJECT to select an existing project or click CREATE PROJECT to create a new project.
      YouTube-API-Select_or_Create_Project.png
    3. Go to Library in the left panel.
    4. Click YouTube Data API V3.
      YouTube-YouTube_Data_API_V3.png
    5. Click ENABLE.
      YouTube-API-Enable.png
    6. Click CREATE CREDENTIALS.
    7. Under Credential Type, select the following:
      • From the Select an API dropdown, select YouTube Data API v3.
      • From What data will you be accessing?, select Public data.
        • YouTube-API-Credentials.png
    8. Click NEXT.
      This will create your YouTube API Key.
    9. Copy the API key and click DONE.
      YouTube-API-Copy_API.png

  2. Get Channel ID

    While configuring the app (in Step 3), you need to specify the YouTube channel ID from which you want to fetch and display the videos.

    Note: In Contentstack, using the YouTube app, you can display videos from any public channel.

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

    1. Visit the home/landing page of the YouTube channel of your choice on a browser.
    2. Right-click on the page and click View page source.
    3. Search for channelId.
      YouTube_-_ChannelID.png
    4. Copy the channel ID.

  3. Install and Configure YouTube in Contentstack Marketplace

    To install the application in Contentstack, follow the steps below:

    1. Login to your Contentstack account.
    2. On the left-hand side primary navigation, you will find a new icon for Marketplace (as shown below). Click the icon to go to the Marketplace.
      YouTube-Marketplace_Icon.png
    3. Within the Marketplace, you will be able to see all the apps available, hover over the YouTube app and click Install App.
    4. On the next screen, select the stack where you want to install the YouTube app and then click the Install button.
    5. On the Configuration page, enter the following details:
      1. API Key: Enter the YouTube API Key that we retrieved in Step 1.
      2. Channel ID: Enter the YouTube channelId that we retrieved in Step 2.
      3. Save in Entry: Choose how you want to save your data in the entry.
        • If you select Whole JSON, the entire object that is being returned from YouTube will be saved. Also, with Whole JSON, you can select only a limited number of videos.
        • If you select Custom JSON, you need to search and add specific YouTube keys you want to fetch. By default, the videoId key is selected.

        Note: Only the embedded source URL (src) will be stored in JSON RTE plugin response.

        Sample JSON: 

        attrs": {
          "src": "https://www.youtube.com/embed/oT1f39lgQdk",
          "type": "YouTube"
        }
        4. YouTube_-_Configuration.png

    6. Click Save and Open Stack to start using the YouTube application.

  4. Use YouTube within your Stack

    To use the YouTube application within an entry of your stack, you can either use a Custom field or a JSON RTE field.

    Follow the steps given below to use the YouTube application using Custom field:

    1. Go to your stack and click the Content Models icon on the left navigation panel, and click the + New Content Type button.
      Create a content type by adding a name and selecting Type as Single as displayed below:
      YouTube-Content_Type.png
    2. In the Content Type Builder page, add a Custom field to your content type by clicking the Insert a field link represented by a + sign.
    3. Under Select Extension/App, select YouTube and click Proceed.
      YouTube-Custom_Field-Add_App.png
    4. After adding the app, click either Save or Save and Close to save your changes.
      YouTube-Custom_Field-Save_and_Close.png
    5. To use the YouTube app, create an entry for this content type, and you will see the YouTube custom field on your entry page as shown below:
      YouTube-Custom_Field-Add_Videos_Button.png
    6. Click + Add Video(s), to select videos from your YouTube account and add them to your entry.YouTube-Custom_Field-Selector_Page.png

      The videos will be displayed in Thumbnail view by default in the custom field as shown below

      YouTube_-_Thumbnail_view_in_the_custom_field.png
    7. To reorder the video, open it in YouTube or delete the video, hover over the image to get the options available, then perform the following:
      1. Click the Drag icon to reorder the video.
      2. Click the Open in YouTube icon to open the video in the YouTube app.
      3. Click the Delete icon to delete the selected video.
        YouTube_-_Reorder_-_Open_in_YouTube_-_Delete_icons.png

        Delete action generates a prompt modal for confirmation.

        YouTube_-_Delete_confirmation_modal.png


    8. You can view the videos in List view by selecting the list option from the drop-down as shown below:
      YouTube-Custom_Field-List_View.png
    9. The videos you select are referenced within your entry. You can add more videos or simply save and publish your entry as it is.

    Follow the steps given below to use the YouTube application using JSON RTE field:

    1. Go to your stack and click the Content Models icon on the left navigation panel, and click the + New Content Type button.
    2. Create a content type by adding relevant details as displayed below:
      YouTube-Content_Type.png
    3. In the Content Type Builder page, add JSON Rich Text Editor in your content type by clicking the Insert a field link represented by a + sign.
    4. To add the YouTube plugin in JSON RTE, select the Properties icon of JSON RTE and under Select JSON RTE Plugin(s), choose YouTube app and then click Add Plugin(s).
      YouTube-JSON-Add_Plugin.png
    5. After adding the plugin, click either Save or Save and Close to save your changes.
      YouTube-JSON-Save_and_Close.png
    6. To use the YouTube app as a JSON RTE plugin, create an entry for this content type, and you will see the YouTube app icon in JSON RTE field on your entry page as shown below:
      YouTube-JSON-Icon.png
    7. Click the YouTube App icon to open the selector page.
      YouTube-JSON-Selector_Page.png
    8. Mark the checkboxes for one or more videos from the page to add the videos.
      The selected video(s) gets displayed in the JSON RTE editor.
      YouTube-JSON-Video_in_Entry.png
    9. To edit or delete the video, hover over the video to get the options available as shown below:
      YouTube-JSON-Edit.png
    10. To edit the video, click the Edit button , make the necessary changes and then click Save.
    11. To delete the video, click the Delete button and then click Save.

      The videos you select are referenced within your entry. You can add more videos or simply save and publish your entry as it is.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

^