How to make a Video Responsive on your blog

All blogger looks for video editing software, designs etc but they are always worried about the video being responsive in theme. The visitor uses several devices world wide so the video needs to be responsive for better user experience. Here is an example and below are the codes easy to incorporate in your theme.

HTML Code needs to be entered into the Blogpost by this

<div class="responsive-video">

src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0"; encrypted-media" allowfullscreen></iframe>
    </div>

For AUTOPLAY VIDEO Html codes, Copy and paste below codes above your video html codes.

<div class="responsive-video">
allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>

Add below codes in CSS section to your template and enjoy the video responsive sizing

/* Video CSS Styles */
.responsive-video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}