Webflow sync, pageviews & more.
NEW

Is it possible to embed a .mp4 video from Google Drive to a website using Webflow without using YouTube, Vimeo, or similar hosting sites? If yes, what are the specific steps for doing so?

TL;DR
  • Upload the .mp4 to Google Drive, set it to "Anyone with the link" access, and extract the File ID from the share URL.
  • Build a direct link using the format https://drive.google.com/uc?export=download&id=YOUR_FILE_ID.
  • Add a Webflow Embed element with a custom <video> tag using the direct link as the source.
  • Publish and test your site to ensure the video plays correctly; note that Google Drive isn't optimized for streaming.

Yes, you can embed a .mp4 video hosted on Google Drive into a Webflow site, but it requires generating a direct link and using Webflow’s Embed element.

1. Prepare the Video in Google Drive

  • Upload your .mp4 video to Google Drive.
  • Right-click on the video and choose Get Link.
  • Set the Sharing Permission to “Anyone with the link” and make sure it's Viewer access.

  • Copy the file's File ID from the share link.
    For example, from this link:
    https://drive.google.com/file/d/1AbCdEfGhIjKlm/view?usp=sharing
    The File ID is 1AbCdEfGhIjKlm.

  • Construct the direct source link as follows:
    https://drive.google.com/uc?export=download&id=YOUR_FILE_ID
    Replace YOUR_FILE_ID with your actual file ID.

3. Add Embed Element in Webflow

  • In the Webflow designer, drag an Embed element into the canvas.

  • Paste the following custom HTML (inline-only as per Webflow's support):

    <video width="100%" controls preload="metadata"> <source src="https://drive.google.com/uc?export=download&id=1AbCdEfGhIjKlm" type="video/mp4"> Your browser does not support the video tag. </video>

  • Click Save & Close after entering the code.

4. Publish and Test

  • Publish your site and test the video to ensure it loads and plays correctly.
  • If playback fails, confirm the video is set to the correct Google Drive sharing permissions.

Limitations

  • Google Drive is not optimized for video hosting, so delivery may be slower, or Google may throttle bandwidth.
  • There’s no player customization like you’d get with Vimeo.

Summary

You can embed .mp4 videos hosted on Google Drive into Webflow by generating a direct download link and inserting a custom video tag inside an Embed element. However, it's not ideal for high traffic or large files—consider this a workaround rather than a robust solution.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
What does it mean when I see the message "No value passed for parameter 'siteSlug'" after adding my GA Measurement ID in Webflow and saving changes, and could this be related to using a .studio domain for my website?
How can I design a website in Webflow using the actual preview resolution of my device, while ensuring responsiveness and avoiding any issues caused by different resolutions?
Can Webflow integrate with IDX providers and handle access restrictions for privileged real estate agents, including the need for IP address verification?
How can I resolve the issue of not being able to sort items on a CMS page in Webflow when using button sorting instead of a dropdown select, especially when navigating to different pages?
How can I redirect my GoDaddy domain name to my Webflow site?
How can I change the z-index of objects in Webflow so that the cursor is not placed behind images?
What is causing the scroll wheel to stop working on the published Webflow site when reaching the section with the black and white gradient?
Why are images appearing blurry on my Webflow site after publishing, despite being reuploaded at a high resolution?
Why isn't my video displaying on the page in Webflow when I populate the video element from the CMS?
How can I optimize my Webflow website with vector graphics and lotties to reduce lag and improve performance on mobile devices?
Is it possible to design and develop a website in Webflow and then connect a third-party headless CMS, such as Hygraph or Sanity, by using custom JavaScript code with API calls? Does Webflow support GraphQL integration for this purpose?
Can Webflow make an API call to my NodeJS server in the backend to retrieve personalized content and integrate with my web application?
How can I unlink elements in a Webflow collection to have different formats for each item's page?
How can I create a nav link in Webflow that navigates to the bottom of my home page from all pages?
How can I add a site-wide banner above the fixed top navigation in Webflow without manually adding it to each page?
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 dynamically redirect to a CMS created after form submission in Webflow?
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!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?