A method for serving HTML5 video on your website via Google Drive, saving bandwidth and reducing server load.
Streaming a video is probably the highest bandwidth activity a visitor will perform on your website. This data usage can add up quickly, and if your web hosting provider tracks and limits monthly bandwidth usage, which most do, it’s very important to find another delivery source. This is where Google Drive comes in.
This method has been tested with all popular web browsers, including Chrome, Firefox, Safari, Internet Explorer and Edge.
Sharing on Google Drive
It’s important to share the video for public viewing. I created a public folder on my Google Drive, so I can easily track and manage my public files.
To share the video:
- Select the video
- Choose the
Share Icon (person with a +)
- Choose
"Get Link"
and ensure anyone with the link to view is selected. - Copy the link (should look something like this https://drive.google.com/file/d/a5b4c5d2e1/view?usp=sharing)
Your video can now be viewed by any person or application with the link. Open it in an incognito window to be sure it’s publicly viewable.
From the link you can extract the ID of the video, in the above example it’s a5b4c5d2e1 for demo purposes only. This is what you will need to insert in the html below.
The HTML
Use the HTML below but be sure to replace the id with your videos id (from the URL you saved), e.g. “a5b4c5d2e1”.
<video preload="true" autoplay loop muted>
<!-- Safari -->
<source
src="https://drive.google.com/uc?export=download&id=a5b4c5d2e1"
type="video/mp4"
/>
<!-- Chrome and FF -->
<source
src="https://drive.google.com/uc?export=download&id=a5b4c5d2e1"
type="video/webm"
/>
</video>
Code language: HTML, XML (xml)
Summary
While there are many potential ways to outsource your video streaming demands, using Google Drive offers an easy and cost effective solution.
If you found this article helpful or if you’ve come up with an improvement or alternative method, I’d love to hear from you in the comment section below.
This doesn’t work if the video is larger than 100mb. Because in that case google returns an HTML page saying “Google Drive cannot scan that big file.”
Thanks for bringing this up, I hadn’t tried with such a large file. This could be a limitation applied to non business Google accounts.
This doesn’t work. I get a cross-origin warning and no video is shown.
EDIT: This shouldn’t be a problem anymore.
Cross-Origin is often blocked by default for security but you should be able to allow it. I have an article (https://vidler.app/blog/javascript/nodejs/cors-cross-origin-resource-sharing-nodejs/) on this with regard to Express in NodeJS, which may be helpful.
This article has been tested and adjusted. The only changes needed were relating to Google Drive sharing process and the resulting URL format. The method works perfectly in July 2020, and it should continue to work for the foreseeable future.
can u please share how to add a random play to this code?
Hi Marsha, I’m not sure I understand the question, do you want to have a set of videos from which a random one is selected and played each time the page loads? If this is the case, you could create an javascript array of play Ids and then have the Id property in the source randomly populated from the array. Hope this helps!