How To Embed Videos Uploaded On Blogger To Be Responsive

 Until now I still haven't found a lot of Bloggers who use video uploads on Blogger. Yes, of course maybe the reason is that the videos uploaded on Blogger cannot be cashed like Youtube. 

But in my opinion, this is not the right reason not to use this one Blogger feature. We can still produce from advertisements posted on posts. This can be useful for tutorial videos with free video hosting from Blogger.
 

But another problem is Blogger's video embed code is not yet responsive. Of course, this can interfere with the appearance of the blog on a smaller screen. For that now I will share tricks so that the videos uploaded on Blogger can be responsive.
 

Uploading videos on Blogger are very easy, obviously, the video file must be prepared, for example with MP4 format. Please click the upload video icon in the top bar in the post editor in compose mode as shown below.
 

 Please upload your video. After the video upload process is complete, please switch the post editor to HTML mode to get the video code. Usually, the code will look like this.

<object id="BLOG_video-c90f4624c2abcde" class="BLOG_video_class" contentid="c90f4624c2abcde" width="320" height="266" ></object>

The code that I mark is the code needed in the next step.

And here is how to embed videos uploaded on Blogger to be responsive.


Please add the following CSS in your blog style.

.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 the video in the post.

<div class="video-responsive">
<video controls>
 <source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI">
</video>
</div>

Please change the text  VIDEO ID with the code that I marked above.

 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 show the video in the post.

<amp-video width="480" height="270" layout="responsive" controls>
   <source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI">
  </amp-video>

Please change the text VIDEO ID with the code that I marked above.

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

Please try and hopefully be useful.