Cara Membuat Tampilan Youtube Responsive di Blogger

Tutorial
110
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 🙂

Tags:

Artikel Terkait

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

Komentar

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.

Penulis

Menu