Cara Simpel Membuat Video Youtube Responsive Di Postingan Blog

PaijoKun. Cara Simpel Membuat Video Youtube Responsive Di Postingan Blog. Ketika kita membuat sebuah artikel pada sebuah blog, tak cuma tulisan dan gambar saja untuk mendukung penjelasan dari sebuah artikel. Namun terkadang dibutuhkan juga sebuah video untuk  mendukung sebuah artikel. Seseorang blogger biasa menggunakan video  dalam sebuah artikel tutorial dan  review suatu barang maupun tempat untuk memperjelas apa yang ditulis dalam artikel tersebut.

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'>
.Responkun {
 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="Responkun">kode video youtube</div> dan akan menjadi seperti ini :

<div class="Responkun"><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

Apabila menemukan masalah, jangan sungkan-sungkan untuk bertanya di kolom komentar dibawah ya... Nanti kita diskusikan. Apabila ada hal baru, mohon kabar-kabar juga ya... :)

Referensi : gifidia.blogspot.com

Baca Juga :

1. Auto Invite Group Facebook, AMAN! Patut Dicoba. 2016 - New!
2. Bandwidth Control Router TP-LINK
3. Cara Bypass Login Page Wifi Id Dengan Link Khusus. Mei 2016
4. Cara Membuat Jaringan Wifi Yang Tersembunyi Untuk Meningkatkan Keamanan Wifi
5. Cara Memunculkan Tombol Penghasilan Pada Blogger
6. Cara Mengamankan Jaringan WIFI Metode MAC Filtering
7. Cara Meningkatkan Jangkauan Sinyal WIFI Kamera
8. Membuat Tulisan Keren Dengan Photoshop Lengkap Dengan Gambar Ala PaijoKun
9. Scripts Auto Undang Like Fanspage Facebook

Bagikan Artikel ini