September 23, 2016

How To Make YouTube Video Player In Blogger Responsive To All Devices

Let me show you how to make your YouTube video player embedded in Blogger blog responsive to all devices.

When you check with your cell phone or tablet and other devices, you realize that they are NOT responsive.

Yes, you cannot just paste the provided code directly on your Blogger blog, or even temper with its dimension (height and width measurements).

It doesn't work.

how to make youtube video player in Blogger responsive to all devices

This is how you can make YouTube video clips from your Blogger blog responsive.

Make YouTube Video Player From Blogger Responsive

Here is a simple tutorial showing you how to make YouTube responsive to any device.

There are two main steps.

Step One:

1. Log-in to your Blogger account.

2. Go to Template. Click on Edit HTML.

3. Search for this code: </style>

4. Now add this code  ABOVE </style>

/* Responsive YouTube Blogger by Kher Cheng Guan */
    /* Web: */

    .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%;
5. Click Save Template button.

Step Two:

1. To make it work, you need to add a wrapping code between your YouTube code, as shown below:

<div class="video-wrapper"> YouTube embed code </div>


<div class="video-wrapper"><iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
2. After pasting the wrapping code between your selected YouTube code, click "Save Template" button.

3. That's all.

Now enjoy this wonder fun responsive video below:

Written by: Kher Cheng Guan