Cara Membuat Tampilan Youtube Responsive di Blogger

Langsung saja, inilah caranya.

Pertama, copy dan paste kode dibawah ini pada kode html sebelum </head>.

/* YouTube Responsive CSS for HubSpot */

.responsive-youtube {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
padding-top: 25px;
}

.responsive-youtube iframe {
position: absolute;
width: 100%!important;
height: 100%!important;
}

Kedua, copy embed video dari youtube misalkan seperti gambar dibawah ini.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/paV06zTMzWc” frameborder=”0″ allowfullscreen></iframe>

Maka saat posting youtube di blogger kamu cukup menambahkan kode <div class=”responsive-youtube”> … </div> diantara kode <iframe> seperti contoh dibawah ini.

<div class=”responsive-youtube”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/paV06zTMzWc” frameborder=”0″ allowfullscreen></iframe>
</div>


Semoga bermanfaat 🙂