Skip to content Skip to sidebar Skip to footer
Home / SEO

Cara Membuat Tampilan Video di Blog Jadi Responsive

By Rio Febrianto Post a Comment
Ketika kita telah berhasil membuat template blog menjadi responsive, terkadang masih ada saja yang kurang yaitu tampilan video di halaman blog yang belum responsive. Sehingga jika video tersebut di buka melalui Hp tampilannya tidak muat satu layar atau kebesaran.

Nah, pada postingan ini saya akan berbagi tutorial bagaimana cara agar video tersebut bisa tampil responsive. Karena fitur blog yang responsive sekarang memang sudah banyak digunakan blogger dan sebagian besar pengunjung juga berasal dari Hp. Jadi blog perlu menyesuaikan tampilannya dengan perangkat yang digunakan. Berikut contoh video youtube yang sudah responsive.


Untuk membuat video youtube di blog menjadi responsive kita perlu menambahkan beberapa kode ke dalam template satu kali saja, dan ada kode tertentu ditambahkan ketika setiap kali menyalin html video youtube ke blog. Untuk lebih jelasnya sobat bisa ikuti langkah dibawah ini.

Cara Membuat Video di Blog Jadi Responsive

Langkah 1
  • Pertama sobat login dulu ke blogger, pilih menu Template -> Edit HTML.
  • Setelah itu cari kode ini </b:skin> gunakan Ctrl+F untuk mempermudah pencarian.
  • 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>
  • Jika sudah Simpan Template.

 Langkah 2
  • Pada saat memasang video di blog misalnya seperti menyematkan video youtube, tentu sobat akan mengambil berupa kode HTML di youtube bukan? Nah, pada saat itu tambahkan kode <div class="ResponsiveWrapper"> diawal dan </div> diakhirnya. Sehingga nanti akan terlihat seperti dibawah ini. Kode warna merah adalah kode yang akan sobat tambahkan, dan warna hitam ganti dengan kode video sobat.
    <div class="ResponsiveWrapper"><iframe width="420" height="315" src="https://www.youtube.com/embed/gtVjLqZHWL8" frameborder="0" allowfullscreen></iframe></div>
  • Jika sudah, berarti video sobat sudah responsive.
Begitulah cara membuat video yang ada di postingan blog bisa responsive jadi nanti video akan mengikuti lebar layar dan tidak akan terpotong. Tutorial diatas juga bisa diaplikasin untuk membuat video postingan dan witget menjadi responsive. Baiklah, cukup itu dulu postingan tentang cara membuat video diblog menjadi responsive. Semoga bermanfaat.

Post a Comment for "Cara Membuat Tampilan Video di Blog Jadi Responsive"