Cara Memasang Video Youtube Responsive di Blog

Berbicara tentang responsive bukan hanya tentang template yang harus responsive tetapi juga menyangkut semua elemen diblog itu sendiri termasuk video youtube. Memasang video di blog tentunya membutuhkan kode-kode tertentu agar nanti tampilannya bisa menyesuaikan dengan ukuran perangkat smartphone.

Memang fitur blog yang responsive sekarang sudah banyak digunakan para blogger saat ini berhubungan karena banyaknya pengunjung yang menggunakan perangkat smartphone seperti samsung untuk mengakses halaman web. Jadi blog perlu menyesuaikan tampilannya dengan perangkat yang digunakan. Terkadang saat kita sudah senang melihat blog yang responsive tapi ternyata masih ada saja beberapa darinya yang belum responsive misalnya saja seperti gambar, video ataupun menu header. Untuk itu pada postingan ini saya  akan bahas tentang cara memasang video youtube responsive di blog.

Langkah 1
1. Pertama sobat login dulu ke blogger, pergi ke Template -> Edit HTML.
2. Setelah itu sobat cari kode ini </b:skin> gunakan Ctrl+F untuk mempermudah pencarian.
3. Setelah bertemu letakkan kode berikut, tepat dibawah </b:skin>

<style type='text/css'>
.ResponsiveWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.ResponsiveWrapper iframe, video, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

4. Jika sudah Simpan Template.

Langkah 2

1. Pada saat memasang video di blog pastinya sobat akan mengambil berupa kode HTML di youtube. Nah, pada saat itu tambahkan kode <div class="ResponsiveWrapper"> di awal dan </div> diakhirnya. Sehingga nantik akan terlihat seperti ini:

<div class="ResponsiveWrapper"><iframe width="450" height="315" src="https://www.youtube.com/embed/gtVjLqZHWL8" frameborder="0" allowfullscreen></iframe></div>

Catatan: Kode warna biru adalah kode yang akan sobat tambahkan, dan warna hitam ganti dengan kode video sobat.
2. Jika sudah, berarti video sobat sudah responsive.

Begitulah cara memasang video youtube responsive di blog. Jadi video di blog anda tentunya sudah responsive dengan mengikuti lebar layar dan tidak akan terpotong. Semoga bermanfaat.

Subscribe to receive free email updates: