How To Embed Videos Uploaded On Blogger To Be Responsive

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 is 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.

How To Embed Videos Uploaded On Blogger To Be Responsive

1. For Non Amp blogs

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=VIDEO ID SAVE HERE">
</video>
</div>

Please change the VIDEO SAVE ID HERE with the code I marked above.

2. 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 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=VIDEO ID SAVE HERE">
  </amp-video>

Please change the VIDEO SAVE ID HERE with the code I marked above.

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

That's the tutorial I've shared this time about tips How To Embed Videos Uploaded On Blogger To Be Responsive. Hopefully with this short article, it can be useful and useful for you. Good luck.

Share :