Blog, Web, Internet dan Bisnis Online

Cara Membuat Video di Blog Jadi Responsive


Ketika kita telah berhasil menjadikan template blog responsive ternyata masih ada yang belum responsive yaitu video youtube yang ada dipostingan blog belum responsive sehingga jika video tersebut di buka melalui hp smartphone akan terpotong dan tidak muat satu layar ataupun kebesaran. Nah, pada postingan ini saya akan berbagi tutorial bagaimana cara agar video youtube di postingan blog bisa tampil responsive. Memang fitur blog yang responsive sekarang sudah banyak digunakan para blogger saat ini berhubungan karena banyaknya pengunjung yang berasal dari hp. 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 akan dibahas masalah video saja. Untuk gambar dan menu header akan dibahas pada tutorial selanjutnya. 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
  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>
  4. <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>
  5. Jika sudah Simpan Template.
Langkah 2
  1. Pada saat memasang video di blog pastinya sobat akan mengambil berupa kode HTML di youtube bukan? 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="420" height="315" src="https://www.youtube.com/embed/gtVjLqZHWL8" frameborder="0" allowfullscreen></iframe></div>
  2. Catatan: Kode warna merah adalah kode yang akan sobat tambahkan, dan warna hitam ganti dengan kode video sobat.
  3. 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 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.




Tag : SEO, Tips Blog
9 Komentar untuk "Cara Membuat Video di Blog Jadi Responsive"

Saya sudah terapkan dan berhasil. terimakasih sudah berbagi

wahh...trims banget broooo...ini script yg jitu sama blog saya..makasih sdh berbagi

Alhamdulilah, makasih banget agan

SIP, BERMANFAAT GAN. DITUNGGU KUNBALNYA

terimakasih,, sangat bermanfaat :)

makasih ya, paling sesuai sama saya ini metodenya :D

Thanks om sharingnya, ijin nyoba di blogspot, udah lama ga buka blogspot,dan ijin share cara bikin video streamingnya juga...

Back To Top