How can I add a promo video to a specific CMS collection page on Webflow without it showing up on all profiles?

Published on
September 22, 2023

To add a promo video to a specific CMS collection page on Webflow without it showing up on all profiles, you can follow these steps:

  1. Upload your promo video to a hosting platform: Before you can add the video to your Webflow site, you need to host it on a video hosting platform like YouTube, Vimeo, or Wistia. Make sure to set the video's privacy settings to "unlisted" or "private" if you don't want it to be accessible outside of your Webflow site.

  2. Copy the embed code: Once your video is uploaded, find the embed code provided by the hosting platform. Each platform may have a slightly different process, but most will provide an option to generate an embed code. Copy this code to your clipboard.

  3. Add a Rich Text CMS field: In your Webflow CMS collection, you need to create a Rich Text field to hold the video embed code. This field will allow you to paste the embed code for each individual CMS item. To do this, go to your Collection Settings, select the appropriate Collection, and click on "Add Field." Choose the "Rich Text" field type and give it a name (e.g., "Video Embed").

  4. Paste the embed code to individual CMS items: Now that you have the Rich Text field set up, navigate to your CMS collection and locate the specific item where you want to add the promo video. Edit that item and paste the video's embed code into the Rich Text field you just created. You can do this by switching to the "Rich Text" mode of the field and pasting the code directly.

  5. Add the video player to the collection page template: To display the video on the specific collection page, open the template for that collection and locate the section or container where you want the video player to appear. Insert an HTML Embed component, found in the Elements panel, and paste the embed code into it. The video will then be loaded dynamically based on the embed code you added to the CMS item in the previous step.

  6. Style the video player (optional): You can customize the appearance of the video player using custom CSS or Webflow's built-in styling options. This allows you to match the video player's design to the overall look and feel of your site.

By following these steps, you will be able to add a promo video to a specific CMS collection page in Webflow without it showing up on all profiles. Each CMS item can have its own unique video embed code, providing a personalized promotional experience for your site visitors.

Additional Questions:

  1. How do I create a Rich Text field in Webflow CMS?
  2. What are some popular video hosting platforms for Webflow sites?
  3. Can I use a video file directly instead of hosting it on a platform like YouTube or Vimeo in Webflow?