Using Video in Webflow

Hosting Video on Google Drive

No items found.
Overview
Webflow-Native Video Sources
Video Sources & URLs
Intro
401
Responsive Video
Intro
402
YouTube | How to Embed YouTube Shorts
Intro
2:40
403
YouTube | How to Start Playback at a Specific Point
Intro
3:18
404
Suppressing YouTube Related Videos
Intro
405
Transparent Videos
Intro
406
Pause Videos when Hidden
Intro
408
Customizing Video Players
Intro
408
Other Video Sources
Hosting Video on Google Drive
Intro
501
No items found.
  • 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.
Table of Contents
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.