How to embed Google Drive videos into a Webflow CMS Collection element using unique URLs from the product database?
TL;DR
- Upload videos to Google Drive, set sharing to "Anyone with the link," and copy the File ID from each video's URL.
- Add a Plain Text field in your Webflow CMS to store each File ID.
- Insert an Embed component in your CMS Template with an iframe using the dynamic File ID in the src URL.
- Adjust iframe settings (size, autoplay, etc.), publish the site, and test each CMS item to ensure videos display correctly.
To embed Google Drive videos into a Webflow CMS Collection, you'll need to create a dynamic embed that accepts unique Google Drive share URLs for each product. Follow these steps:
1. Prepare the Google Drive Video Links
- Upload videos to your Google Drive.
- Change the sharing settings to “Anyone with the link can view.”
- Copy the shared URL. It typically looks like:
https://drive.google.com/file/d/FILE_ID/view?usp=sharing. - Extract just the FILE ID, which is the string between
/d/and/view.
2. Add a Video URL Field in Your CMS Collection
- Go to your CMS Collection (e.g., Products).
- Add a new Plain Text field called something like Drive Video ID.
- Enter only the FILE ID (not the full URL) for each product (e.g.,
1xAYZmgjTf5Xn3A2dUTsbp8_DCpaLpVrE).
3. Add an Embed Element to Your Collection Page
- In the CMS Template Page (e.g., Product Template), drag in an Embed component where the video should appear.
- Paste the standard Google Drive video embed iframe, replacing the file ID with a CMS reference.
Use this structure:
https://drive.google.com/file/d/{{wf {"path":"drive-video-id","type":"PlainText"\} }} /preview
So the full iframe code looks like:
<iframe src="https://drive.google.com/file/d/{{wf {"path":"drive-video-id","type":"PlainText"\} }}/preview" width="640" height="480" allow="autoplay" allowfullscreen loading="lazy"></iframe>- This will dynamically replace
{{wf ... }}with each product's unique Drive file ID.
4. Adjust Embed Size and Behavior
- Set width/height depending on your layout needs.
- Include attributes like loading="lazy", allowfullscreen, and autoplay if needed.
5. Publish and Test
- Publish your Webflow project.
- Navigate to several product pages to verify the embedded video loads and plays correctly.
Summary
To embed Google Drive videos dynamically in a Webflow CMS Collection, extract the File ID from each shared URL, store it in a CMS field, and use it in an Embed element with the correct Google Drive preview URL. This method ensures each product displays its unique video.