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 video from Google Drive using HTML5
video elements and of course responsive.
Why bother using HTML5 video
elements, isn't Google Drive already providing an embed iframe code? Maybe this
question is in some bloggers who often use Google Drive.
As we know that Google Drive does provide embed code with an iframe, but there is little to block for me especially if it is used to embed video. Ie we have to click twice 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 quite disturbing player display.
With HTML5 video elements,
then we can more easily to custom player 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.
Please create a Google Drive
API key with the following steps:
1. Please log in to the Google API Console
2. Then please click the Create Project button
3. After the new project is successfully created, please select the Google Drive API then click the Enable button.
4. Then please click the Create Credentials button.
5. For optian 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 a Web server (eg node.js, Tomcat) . Then check User Data and click the What credentials do I need button ?
6. Then click the Create OAuth client ID button.
7. Add a Name for the Product Name then click the Continue button and then click Done .
8. Then please click the blue Create Credentials button on the Credentials tab and select the API key . Please copy the API key code provided and record it in notepad.
At this point we have
successfully created the Google Drive API key , then follow the next step to
embed the Google Drive video in the post.
And here is how to embed
videos uploaded in Google Drive to be responsive by using HTML5 video elements.
1. For Non Amp blogs
Please add the following CSS to your blog style. If you have previously saved CSS like this by following the posting how to embed videos uploaded on Blogger , 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 change the text FileID with the code from the Google Drive file share URL like the following example I marked and make sure the file is Public on the web .
https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing
Then writing GoogleDriveAPIkey please replace with the Google Drive API key that was created.
2. For AMP HTML blogs
Please install the following amp-video in the HTML edit of your blog, if it already exists then there is no 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 change the text FileID with the code from the Google Drive file share URL like the following example I marked and make sure the file is Public on the web .
https://drive.google.com/file/d/0Bz4YdwRI3rnCYkdjamNpTEs5bz/view?usp=sharing
Then writing GoogleDriveAPIkey please replace with the Google Drive API key that was created.
I didn't include the demo
here, but I've tried the codes above and it works perfectly.
Please try and hopefully
useful.