How to Embed Google Drive Videos with HTML5 Video Elements

How to Embed Google Drive Videos with HTML5 Video Elements - Previously we already knew how to embed videos uploaded on Blogger to be responsive by using HTML5 video elements. Well this time we will also use the same trick that is how to embed videos from Google Drive using HTML5 video elements and of course responsive.

Why bother using HTML5 video elements, does Google Drive already provide an iframe embed code? Maybe this question is in some Bloggers who often use Google Drive.

As we all know that Google Drive has indeed provided an embed code with an iframe, but there are a few that block it for me especially if it is used to embed videos. That is, we have to click 2 times to play the video and there is a link icon to preview the video to Google Drive on the top right of the player which is enough to interfere with the player's display.

With HTML5 video elements, we can make it easier for custom players for Google Drive videos. But to be able to use HTML5 video elements for Google Drive videos, we must use the Google Drive API key for video sources.

How to Create a Google Drive API key

Please create a Google Drive API key with the following steps:

• Please enter the Google API Console
• Then please click the Create Project button
• After the new project is successfully created, please select the Google Drive API then click the Enable button.
• Then please click the Create Credentials button.
• For optics Which API are you using? Please select the project that we created earlier. For the option Where will you be calling the API from? Please select the Web server (e.g. node.js, Tomcat). Then check User Data and click the What do I need credentials button?
• Then click the Create OAuth client ID button.
• Add Name to Product Name then click the Continue button then click Done.
• Then please click the blue Create Credentials button on the Credentials tab then select API key. Please copy the API key code provided and note it in notepad.

Until here we have successfully created the Google Drive API key, then follow the next steps to embed the Google Drive video in the post.

And here is how to embed videos uploaded on Google Drive to be responsive by using HTML5 video elements.

How to Embed Google Drive Videos with HTML5 Video Elements

1. For Non Amp blogs

Please add the following CSS in your blog style. If you have previously stored CSS like this, then please skip this step.

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:0;
}

And use the following code to display videos from Google Drive in the post.

<div class="video-responsive">
<video controls>
 <source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
</video>
</div>

Please replace the FileID with the code from the Google Drive file share URL like the following example that I marked and make sure the file is Public on the web.

https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Then the writing GoogleDriveAPIkey please replace it with the Google Drive API key that was created.

2. For AMP HTML blogs

Please install the following amp-video js in editing the HTML of your blog, if it already exists then you don't need to install it again.

<script async="" custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Then please use the following code to display the video in the post.

<amp-video width="480" height="270" layout="responsive" controls>
   <source type="video/mp4" src="https://www.googleapis.com/drive/v3/files/FileID?alt=media&key=GoogleDriveAPIkey">
  </amp-video>

Please replace the FileID with the code from the Google Drive file share URL like the following example that I marked and make sure the file is Public on the web.

https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing

Then the writing GoogleDriveAPIkey please replace it with the Google Drive API key that was created.

Here I don't include the demo, but I've tried the codes above and it runs perfectly.

That's the tip I can share this time about How to Embed Google Drive Videos with HTML5 Video Elements. Hopefully this tutorial can be useful for you and good luck.