Cara Membuat Tampilan Youtube Responsive di Blogger

  1. Home
  2. Tutorial
  3. Cara Membuat Tampilan Youtube Responsive di Blogger
2 Comments
Tutorial
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 🙂

Previous Post
Jangan Membelakangi Tubuh Anda dengan Harimau atau Singa, Inilah Akibatnya!
Next Post
Inilah Rekaman Drone Fantastis yang Menangkap Kehidupan Salmon Merah di Alaska

2 Comments. Leave new

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close
*
*



Menu