Cara Membuat Tampilan Youtube Responsive di Blogger

0
287
Cara Membuat Tampilan Youtube Responsive di Blogger
Pada tutorial kali ini, saya akan share tutorial Cara Membuat Tampilan Youtube Responsive di Blogger. Masalah ini biasanya sering terjadi pada template blogger yang tidak membuat template css-nya untuk membuat tampilan youtube terlihat responsive. Cara negatasinya sangat simple dan hanya butuh beberapa baris kode css saja.

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 🙂

LEAVE A REPLY

Please enter your comment!
Please enter your name here