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 +)
"Get Shareable Link"
- Copy the id (this will be used in the HTML)
- Set the view permissions to
"On - Anyone with the link"
Your video can now be viewed by any person or application with the link.
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>
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.