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

TL;DR

To embed Google Drive videos into a Webflow CMS Collection element using unique URLs from the product database, you'll need to follow these steps:

1. Get the Google Drive video URL: First, upload your video to Google Drive. Once uploaded, right-click on the video file and select "Get shareable link". Make sure the sharing settings are set to "Anyone with the link can view".

2. Get the unique URL for each video: In your Webflow CMS Collection, you should have a field that includes the Google Drive video URL for each product. This could be a plain text field or a rich text field, depending on your setup.

3. Add an embed element to your CMS Collection Template: In your Webflow Designer, navigate to the CMS Collection Template that you want to display the videos on. Add an Embed element to the appropriate location on the template.

4. Customize the embed element: With the Embed element selected, click on the gear icon and open the settings panel.

5. Use dynamic binding to insert the video URL: Inside the embed element, use the dynamic binding feature to insert the unique product video URL. To do this, click on the plus icon in the URL field and select the appropriate field from your CMS Collection that contains the Google Drive video URL.

6. Adjust the iframe dimensions: By default, the Google Drive video will be embedded using an iframe. If necessary, adjust the width and height of the iframe to ensure proper display of the video.

7. Preview and publish: Save your changes and preview the CMS Collection Template to see how the videos are displayed. If everything looks good, publish your site to make the changes live.

Following these steps will allow you to embed Google Drive videos into a Webflow CMS Collection element using unique URLs from the product database. Please note that this method assumes that the URLs in your CMS Collection are pointing to publicly accessible Google Drive videos.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

How can I create a slider for a before/after image view in Webflow? Is there a better way to showcase comparison photos for optimal mobile view?

Which CMS is the easiest to use and best to integrate with Webflow, allowing clients to easily make changes to text, images, and add blog posts without any loss in HTML/CSS/JS after exporting the design from Webflow?

What is the issue with the positioning menu in Webflow? Does it not appear when trying to layer div blocks over each other?

Is it possible to do integration work on the staging domain before it goes into production in Webflow?

Is there a workaround for the limitation in Webflow regarding custom code with more than 10,000 characters?

Can I design a site in Webflow with placeholder copy that clients can edit in while the site is still in development, and then revert back to static elements once all content is finalized and publish it as a normal website without incurring CMS costs?

What are the limitations of Webflow's CMS, including the maximum number of references, items per collection, and collection items per project? How can these limitations be bypassed with a higher hosting plan?

Can I create vertical tabs in Webflow?

How does Webflow handle the submission of passwords in its forms?

Can Webflow connect to an external data source and use that data as if it was an internal collection, or is the only option to use the API to manually push data into Webflow?

How can I implement reCAPTCHA v3 on my Webflow sites?

What is the best way, from an SEO perspective, to make a website available in both English and Dutch using Webflow?

What are the required records to connect a subdomain to Webflow if the main domain is not meant to be connected?

How can I change the video in a video player using a button or thumbnail in Webflow?

How can I load a JSON file in the Webflow Custom Code section, and where should I place or write a new PHP file to display Jobvite data?

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?

Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?

In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!