Halaman

    Social Items



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, namely how to embed videos from Google Drive by using HTML5 video elements and of course responsive. 

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

As we know that Google Drive has provided an embed code with an iframe, but there are a few that block me especially if it is used to embed videos. Namely, 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 annoying to the player's appearance. 

With HTML5 video elements, we can be 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. 

Please create the 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 a new project has been successfully created, please select the Google Drive API then click the Enable button.
  4. Then please click the Create Credentials button.
  5. For option Which API are you using? Please select the project that we created earlier. For option Where will you be calling the API from? Please select a Web server (eg node.js, Tomcat). Then check the User Data and click the What credentials do I need?
  6. Then click the Create OAuth client ID button.
  7. Add a Name to Product Name then click the Continue button then click Done.
  8. Then please click on the Create Credentials blue button in the Credentials tab then select API key. Please copy the API key code provided and note it in notepad.

Until here we have succeeded in making 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.

1. For Non-Amp blogs

Please add the following CSS in the style of your blog. If you have previously saved CSS like this by following the posting on 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 URL of the Google Drive file share 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 article GoogleDriveAPIkey please replace with the Google Drive API key that was created.

2. For AMP HTML blogs

Please install the following videos to edit the HTML of your blog, if it's already there, 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 change the text FileID with the code from the URL of the Google Drive file share 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 article GoogleDriveAPIkey please replace with the Google Drive API key that was created. 

Here I do not include the demo, but I have tried the codes above and are running perfectly. 

Please try and hopefully useful.

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, namely how to embed videos from Google Drive by using HTML5 video elements and of course responsive. 

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

As we know that Google Drive has provided an embed code with an iframe, but there are a few that block me especially if it is used to embed videos. Namely, 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 annoying to the player's appearance. 

With HTML5 video elements, we can be 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. 

Please create the 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 a new project has been successfully created, please select the Google Drive API then click the Enable button.
  4. Then please click the Create Credentials button.
  5. For option Which API are you using? Please select the project that we created earlier. For option Where will you be calling the API from? Please select a Web server (eg node.js, Tomcat). Then check the User Data and click the What credentials do I need?
  6. Then click the Create OAuth client ID button.
  7. Add a Name to Product Name then click the Continue button then click Done.
  8. Then please click on the Create Credentials blue button in the Credentials tab then select API key. Please copy the API key code provided and note it in notepad.

Until here we have succeeded in making 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.

1. For Non-Amp blogs

Please add the following CSS in the style of your blog. If you have previously saved CSS like this by following the posting on 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 URL of the Google Drive file share 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 article GoogleDriveAPIkey please replace with the Google Drive API key that was created.

2. For AMP HTML blogs

Please install the following videos to edit the HTML of your blog, if it's already there, 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 change the text FileID with the code from the URL of the Google Drive file share 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 article GoogleDriveAPIkey please replace with the Google Drive API key that was created. 

Here I do not include the demo, but I have tried the codes above and are running perfectly. 

Please try and hopefully useful.
Load Comments

Subscribe Our Newsletter