HTML5 Video Streaming from Google Drive

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:

  1. Select the video
  2. Choose the Share Icon (person with a +)
  3. Choose "Get Shareable Link"
  4. Copy the id (this will be used in the HTML)
  5. Set the view permissions to "On - Anyone with the link"

Your video can now be viewed by any person or application with the link.

The HTML

Use the HTML below but be sure to replace the id with your videos id (from the URL you saved), e.g. “0B0hxqlVgzCVPZ09BYTlQazZuZXM”.

<video id="bgVideo" preload="true" autoplay loop muted class="hidden-xs hidden-sm">
    <!-- Safari -->
    <source src="https://drive.google.com/uc?export=download&id=0B0hxqlVgzCVPZ09BYTlQazZuZXM" type='video/mp4'/>
    <!-- Chrome and FF -->
    <source src="https://drive.google.com/uc?export=download&id=0B0hxqlVgzCVPZ09BYTlQazZuZXM" type='video/webm'/>
</video>

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.

2 Replies to “HTML5 Video Streaming from Google Drive”

  1. 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.”

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.