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.

How to Apload Video in Blogger


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="c90l4724k2abcde" 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.

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

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

Read Also: The Ideal Way to Get Ideas for Writing

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

Please change the text ID VIDEO SAVE IN HERE 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.

Read Also: How to Install Ads in the Middle-End of Blog Posts/Articles

Comments

Popular posts from this blog

7 Functions of VPS You Need to Know

Google Algorithm 2018 and Change Your SEO Strategy

5 Best Battle Royale Games (PUBG) on Smartphones

Increase Blog Traffic By Setting Permalink

How to Create SEO Friendly Blog Post Title

HTML Color Code and How to Use it

The Ideal Way to Get Ideas for Writing

Creating Sub Domains from Custom Domain Blogspot

Comparison of WordPress Advantages With Other Platforms

How to Create Free Website with Weebly