Cara Simpel Membuat Video Youtube Responsive Di Postingan Blog

Cara Simpel Membuat Video Youtube Responsive Di Postingan Blog

Namun ketika memberikan suatu video dalam artikel blog biasa dijumpai suatu masalah apabila artikel tersebut dibuka melalui ponsel. Video tersebut akan terpotong sehingga videonya tidak bisa dilihat dengan baik. Kan otomatis pengunjung akan kesal dan bisa mengurungai jumlah visitor yang ada.

Mungkin cara ini sudah banyak di google, namun yang saya dapat dari google itu sangat membutuhkan banyak langkah demi langkah. Salah satunya tutorial milik mbak Arlina, ketika melihat artikelnya tentang membuat video youtube responsive dan saya scroll ke bawah dan ternyata banyak sekali kode yang harus dimasukkan disini disitu. Intinya cuma 1, RIBET! akhirnya saya menemukan sebuah cara yang sangat simpel dan mudah cuma membutuhkan 2 langkah di awal dan 1 langkah selanjutnya. Langsung saja ikuti langkah-langkah berikut ini.

Langkah-Langkah Membuat Video Youtube Responsive Di Postingan Blog :

Langkah 1

1. Masuk ke menu Template > Edit HTML
2. Cari kode ]]></b:skin> (gunakan ctrl+f untuk mempermudah pencarian kode)
3. Masukkan kode dibawah ini tepat dibawah kode ]]></b:skin>
<style type='text/css'>
.Respon {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.Responkun iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
</style>
4. Jika sudah klik save template.

Langkah 2. (memasang video responsive pada postingan)
1. Pada saat ingin memasang video di blog, kamu harus mengambil kode video dari youtube. Nah, sebelum kode itu tambahkan kode <div class="Respon">kode video youtube</div> dan akan menjadi seperti ini :

<div class="Respon"><iframe width="560" height="315" src="https://www.youtube.com/embed/wJD7zZ4i6ZE" frameborder="0" allowfullscreen></iframe></div>

Catatan : Kode berwarna merah adalah kode yang harus kamu tambahkan pada kode video dari youtube
2. Apabila sudah, berarti video kamu sudah responsive.

Berikut contoh video yang responsive

Begitulah Cara Simpel Membuat Video Youtube Responsive Di Postingan Blog. Jadi nanti video akan mengikuti lebar layar dan tidak akan terpotong. Tutorial diatas berlaku untuk membuat video postingan dan witget menjadi responsive. Jika sudah berhasil berarti cukup itu dulu postingan tentang cara membuat video diblog menjadi responsive. Semoga bermanfaat.

Nb : Usahakan template blog sudah responsive