Using Video in Webflow

Hosting Video on Google Drive

Overview
Video Hosting Options
101
Webflow-Native Video Sources
Video Sources & URLs
401
Responsive Video
402
YouTube | How to Embed YouTube Shorts
2:40
403
YouTube | How to Start Playback at a Specific Point
3:18
404
Suppressing YouTube Related Videos
405
Transparent Videos
406
Pause Videos when Hidden
408
Customizing Video Players
408
Other Video Sources
Hosting Video on Google Drive
501
No items found.
Published
November 25, 2022
Updated
in lightbox
  • Upload your video to Google Drive
  • Made the video file, or the folder it's in, viewable by anyone with the link.
  • Get the video ID. You may need to open it in a new window in order to see that ID.

Place this code in a custom embed, using your video's file ID.

<video class="gdriveVideo" preload="auto" width="100%" height="auto" controls>
    <source src="https://drive.google.com/uc?export=download&id=*YOUR-VIDEO-ID-HERE*" type="video/mp4">
</video>

Notes

Brian Caicco offers a variation of this with some responsive CSS included;

https://discourse.webflow.com/t/how-to-add-a-mp4-file/196811/19?u=memetican

Demo

  • Note the long load time, since the whole thing must first download. Google Drive does not provide streaming capability.
Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.