• Translate

9/13/2018

How To Embed Videos Uploaded On Blogger To Be Responsive

Tutorial Blogspot |

Advertisement

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.

How To Embed Videos Uploaded On Blogger To Be Responsive

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">
<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.
Please try and hopefully be useful.

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
Disqus
Blogger
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.