How to embed Google Drive videos into a Webflow CMS Collection element using unique URLs from the product database?
- Upload videos to Google Drive, set sharing to "Anyone with the link," and extract each video's File ID.
- Add a "Drive Video ID" text field to your CMS Collection and store each video's File ID.
- Use an Embed element with a dynamic iframe using the File ID (
/file/d/{{wf {cmsField:"drive-video-id"} }}/preview). - Style the iframe responsively (e.g., 16:9 aspect ratio) and verify on publish that each video loads correctly based on its File ID.
To embed Google Drive videos into a Webflow CMS Collection using unique video URLs stored in the product database, follow the steps below to ensure successful dynamic embedding.
1. Prepare Your Google Drive Videos
- Upload your videos to Google Drive.
- Set each video’s share settings to “Anyone with the link can view”.
- Get the Google Drive File ID from the video URL — for a link like:
https://drive.google.com/file/d/1aB2cCdEF3GhIjKLMn/view, the File ID is 1aB2cCdEF3GhIjKLMn.
2. Structure Your CMS Collection
- In your Webflow CMS Collection (e.g., Products), add a Plain Text field called something like “Drive Video ID”.
- Paste each video’s File ID (not the full URL) into the corresponding entry.
3. Embed the Video Using an Embed Element
- On your Collection Page, add an Embed element where you want the video to appear.
- Use the following iframe embed format inside the Embed block:
Paste this code:
https://drive.google.com/file/d/{{wf {cmsField:"drive-video-id"} }} /preview
- Replace
drive-video-idwith the actual field name. - The full embed iframe will be dynamically built like:
<iframe src="https://drive.google.com/file/d/{{wf {cmsField:"drive-video-id"} }}/preview" width="640" height="480" allow="autoplay" loading="lazy"></iframe>
- Important: Ensure there are no extra spaces in the file ID placeholder.
4. Style and Configure Responsiveness
- Use Webflow’s Responsive Embed wrapper or set custom width/height to make the iframe mobile-friendly.
- You can set a 16:9 aspect ratio using a nested Div with
padding-top: 56.25%andposition: relative, then place the iframe inside.
5. Test Each Collection Page
- Publish your site and visit a product Collection Page.
- Verify that the video embedded corresponds to the correct Google Drive File ID in the CMS.
- If the video doesn’t load, make sure:
- The sharing permissions on Google Drive are set to public.
- The File ID in the CMS is spelled correctly.
Summary
To embed Google Drive videos dynamically in a Webflow CMS Collection, store the File ID in a CMS field, then use a dynamic iframe embed with that ID (/file/d/[ID]/preview). Ensure public sharing permissions are enabled and test each video to confirm proper functionality.