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 persoalan 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 kafetaria 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="c90f4624c2abc57" 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. 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;
}
↪ 2. And use the following code to display the video in the post.
<div class="video-responsive">Please change the VIDEO SAVE ID HERE with the code I marked above.
<video controls>
<source type="video/mp4" src="https://www.blogger.com/video-play.mp4?contentId=VIDEO ID SAVE HERE">
</video>
</div>
Please try and hopefully be useful.