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 your .mp4 video to Google Drive, set sharing to Anyone with the link, and copy the URL.
  • Modify the link to a direct download format by replacing /file/d/FILE_ID/view?usp=sharing with /uc?export=download&id=FILE_ID.
  • In Webflow, add an Embed element and insert a <video> tag with the direct link as the source.
  • Save and publish your site, but note that Google Drive may have bandwidth limitations; consider using a video CDN for better performance.

Yes, you can embed a .mp4 video from Google Drive in Webflow, but you need to generate a direct file link since Google Drive doesn't natively support embedding in Webflow’s video element. Follow these steps:

1. Upload Your Video to Google Drive

  • Go to Google Drive and upload your .mp4 video.
  • Right-click the file, then select Get link.
  • Change the access to Anyone with the link, then copy the URL.
  • The Google Drive shareable link follows this format:
    https://drive.google.com/file/d/FILE_ID/view?usp=sharing
  • Replace the part after /file/d/ with the actual file ID, and modify the link as follows:
    https://drive.google.com/uc?export=download&id=FILE_ID
  • This is now a direct link to your video file.

3. Embed the Video in Webflow

  • Go to your Webflow project and add an Embed element (from the Add panel).

  • Paste the following iframe snippet inside the embed code field:

    <video controls autoplay width="100%">
    <source src="DIRECT_LINK_HERE" type="video/mp4">
    Your browser does not support the video tag.
    </video>

  • Replace DIRECT_LINK_HERE with your generated direct link from Step 2.

  • Click Save and publish your site to test the embedded video.

Summary

You can embed a Google Drive-hosted .mp4 video by uploading the file, generating a direct download link, and using a custom <video> tag inside an Embed element in Webflow. However, this method relies on Google's file hosting, which may have bandwidth limitations. For better performance, consider dedicated video CDNs.

Rate this answer

Other Webflow Questions