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 and get a shareable link set to "Anyone with the link."
  • Modify the link from open to uc, then use this direct video URL in an Embed element on Webflow with the appropriate HTML code for an embedded video.

Embedding a .mp4 video from Google Drive onto a Webflow website is possible but involves a few specific steps to ensure smooth functionality. Here's how you can do it:

1. Upload Video to Google Drive

  • Upload your .mp4 video to your Google Drive account.
  • Make sure the video is in a folder that's easily accessible.

2. Get Shareable Link

  • Right-click on the video and select Get shareable link.
  • Ensure the settings allow everyone with the link to view. Change it to Anyone with the link if necessary.

3. Obtain Direct Video URL

  • Once the shareable link is copied, you will need a direct link to the video file.
  • Replace open in the URL with uc to get the direct video link. For example, from https://drive.google.com/open?id=abcd to https://drive.google.com/uc?id=abcd.

4. Add to Webflow

  • Open your Webflow project where you want to embed the video.
  • Use an Embed element from the Add panel and drag it to where you want the video to appear.
  • Paste the following code into the Embed element editor, replacing DIRECTVIDEOURL with your Google Drive direct video URL: 

  ```html

  <video width="100%" height="auto" controls>

    <source src="DIRECTVIDEOURL" type="video/mp4">

    Your browser does not support the video tag.

  </video>

  ```

  • Save and Publish your project to see the changes on your live site.

Summary

By following these steps, you can successfully embed an .mp4 video from Google Drive into your Webflow site without using platforms like YouTube or Vimeo. Ensure to adjust share settings in Google Drive and transform the URL to serve the video directly within your Webflow project.

Rate this answer

Other Webflow Questions