How to embed videos from Google Drive into blogger

Previously at Blogspot Tips shared How to embed videos from Google Drive into blogger. But at that time to be able to embed videos stored on Google Drive, you had to use the Google Drive API key so that the video could be embedded with HTML5 video elements.

How to embed videos from Google Drive into blogger

However, since generating a Google Drive API key is quite complicated for beginners, this article will share an easier way to embed Google Drive videos in blogger.

For HTML embeds, it still uses HTML5 video elements, while for this video source you can now use the Google Drive direct download URL.

With this Google Drive direct download URL, it is certain that even beginners will easily get video sources on Google Drive. Of course, getting the Google Drive Direct Download URL is pretty easy, with the help of the Google Drive Direct Download Link Generator tool at the end of this article.

To embed a video on Google Drive with the HTML5 video element in blogger, follow the steps below.

How to embed videos from Google Drive into blogger

1- Add CSS to the CSS section of the blog

.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;
}

2- Use the following code to display video from Google Drive with HTML5 video elements in post.

<div class=”video-responsive”>
<video controls>
<source type=”video/mp4″ src=”Live video URL here”>
</video>
</div>

How to get a direct link from Google Drive, everyone knows how because it’s not too complicated for example The

Link to share has the form:

1- https://drive.google.com/file/d/ABCDXYTZ/view?usp =sharing

Or

2- https://drive.google.com/open?id=ABCDXYTZ

The direct download link has the form:

https://drive.google.com/uc?id=ABCDXYTZ

For convenience, you can use the tool Following to get the direct download link used for posting videos from Google Drive with HTML5 video element to blogger by pasting the share link type 1 into the tool and clicking “Create direct link” to get the link.

Code to create a table for anyone who needs it.

Click to rate this post!
[Total: 0 Average: 0]
49
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x