How to embed Google Drive videos into a Webflow CMS Collection element using unique URLs from the product database?

To embed Google Drive videos in a Webflow CMS Collection list, using unique video URLs pulled from your CMS, you’ll need to format the URLs correctly and use the Embed component. Google Drive links must be transformed from shareable links to embeddable links.

1. Prepare the Google Drive Video URL

• When uploading videos to Google Drive, Google provides a “shareable link” like:
  https://drive.google.com/file/d/FILE_ID/view?usp=sharing
• This format won’t work directly in an iframe. Convert it to an embeddable format:
  https://drive.google.com/file/d/FILE_ID/preview
• Only the FILE_ID portion is dynamic. You should store this in your Webflow CMS.

2. Add a Plain Text Field in Your CMS Collection

• Go to the CMS Collection where your video URLs live.
• Add a new Plain Text field (named something like Drive Video ID).
• For each item, copy just the file ID from your Google Drive URL (looks like a long string of letters/numbers between /d/ and /view).
• Example: For https://drive.google.com/file/d/1AbcDEFg123456789/view, copy 1AbcDEFg123456789.

3. Use an Embed Element in the Collection List

• In your Webflow project, go to the CMS Collection Page or Section.

• Drag in an Embed widget inside the repeating CMS item.

• Paste the following code into the Embed widget:

  <iframe src="https://drive.google.com/file/d/{{wf {&quot;path&quot;:&quot;drive-video-id&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}" width="640" height="360" allow="autoplay" allowfullscreen loading="lazy"></iframe>

• Replace "drive-video-id" with the actual Field Name slug of your CMS field containing the Google Drive ID.

• If you're unsure of the correct CMS binding syntax, use Add Field while editing the Embed component to insert it properly.

4. Style the Video Responsively

• Webflow iframes are not fully responsive by default.
• Wrap the iframe in a div block and apply aspect ratio styling (e.g., 16:9 using padding-bottom trick or through Webflow’s Aspect Ratio feature) for better responsiveness.

5. Publish to Test

• Publish your Webflow site to verify the videos load properly on the live site.
• Note: Users may need Google access to view the video — ensure videos are set to "Anyone with the link can view" in Drive.

Summary

To embed Google Drive videos into a Webflow CMS Collection, store only the Google Drive file ID in a CMS field, format the URL using /preview, and place it inside a dynamic Embed component using Webflow’s CMS binding system. Make sure sharing settings in Google Drive are public.