Make your YouTube Video Responsive on Blogger (with Pictures)

In this generation where most of the people are now using high-end mobile devices and using it on their daily routine, as a blogger, the name of the game in terms of template designs and layouts is "Responsive", which means that your layout is working on any device,  it allows the visitor of your blog to view it smoothly in smart phones and tablets.

In my other blog  I'm adding Music Videos from YouTube. Embedding codes is not a problem, however, the appearance of the video when it viewed on Smart phones is a big deal for me,  I have to fixed and adjust the width and height of the video, which is for me a big hassle.

So here's the solution to have your Video become responsive.

First, Log-in to your Blogger account.

2. Go to Template > Edit HTML and search for this code </style>

3. Add this code:

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

See example:

Then Click Save Template

4. add this code to every embed codes  <div class="video-wrapper"> YouTube embed code </div>

see example below

Important Note: 

Always backup you Template! 

Thanks for reading!

I've learned it from: AVEX

SHARE