How to Embed Videos Uploaded on Blogger To Be Responsive

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

But in my opinion, this is not the right reason for not using this one Blogger feature. We can still generate from ads that are posted in posts. This can be useful for tutorial videos with free video hosting from Blogger.
 

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

Uploading videos on Blogger are very easy, obviously, the video file must be prepared for example in 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 the following.

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

The code I marked is the code needed in the next step. 

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

1. For Non-Amp blogs

Please add the following CSS in the style of your 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;
}

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 ID VIDEO SIMPAN DI SINIwith the code I marked above.
 

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.blogger.com/video-play.mp4?contentId=ID VIDEO ">
  </amp-video>

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

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

Please try and hopefully useful.