The Vimeo extension lets you fetch Vimeo 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 Vimeo custom field extension for your content types in Contentstack.

  1. Get the Vimeo Access token
  2. Add the Vimeo custom field extension to your stack
  3. Use your custom field
  1. Get the Vimeo Access Token

    In order to set up this extension, you will need your Vimeo account’s access token. Refer to this article to learn how to get it.
    Note down the access token, as you will need it while configuring this extension in Contentstack ( in Step 3).

  2. Add the Vimeo 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.create-new-button.png
    3. In the Select Extension Type window, select Custom Field.
      Select custom fields.png
    4. On the Create New Extension page, enter values in the fields as given below:
      1. Title (required): Provide a suitable title, for example “Vimeo,” for your custom field. This title will be visible when you select the extension in the custom field in your content type.
      2. 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.
      3. Multiple (optional): Leave this field unchecked.
      4. Hosting method (required): Select Hosted by Contentstack as the hosting method for this content type.
      5. Extension source code (required): Specify the extension code here. To get the code, contact our Support team.

        The support team will provide you with the source code. Copy the code from the index.html file located in the root folder and paste it in the Extension source code field.

      6. Config Parameter - Provide the value for the config parameter that is the Vimeo access token that you generated in step 1 as shown below:

        "access_token": "xxxxxxxxxxxxxxxx588fb85xxxxxxx"

    5. Save the custom field.

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

  3. 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 “Vimeo” field that you created and set the other properties. You can add other fields as per requirements.vimeo.png
    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 Vimeo field in action.
    5. Click Choose Video. This displays the list of the videos. Select the video you want to add and click on Save. Choose vimeo video.png

    6. Select the video you want to add and click on Save.

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

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page