Salam jumpa kembali dengan Ninix News Berbagi Informasi Untuk Semua, kali ini admin ingin memberikan informasi bagi sobat semua tentang Cara Buat Video Responsive Pada Postingan. Responsipnya sebuah template kebanyakan hanya pada gambar dan artikel tapi tidak pada video yang di posting.
Pentingnya video agar responsive yang di posting dalam sebuah artikel blog adalah hal yang krusial sekali karena kita tau pengunjung yang datang dari berbagai arah dengan menggunakan beragam gadget ada yang komputer, laptop, Hp dll nah bila theme atau template blog yang kita gunakan responsiv maka hal itu akan membuat nyaman sang pengunjung karena tampilan halaman blog kita dapat secara otomatis menyesuaikan ukurannya dengan gadget pengunjung tersebut.
Yang jadi permasalahan kebanyakan theme atau template yang notabene katanya 100% responsive begitu kita posting video dalam artikel tidak dapat merubah video tersebut menjadi responsiv, ini berarti theme atau template tersebut hanya meresponsivkan tampilan artikel dan gambar doang. Untuk itu silahkan lanjutkan membaca untuk mengetahui bagaimana caranya meresponsivkan video yang ada pada postingan blog.
Langkah pertama yang harus anda lakukan dalam meresponsivkan video dalam postingan adalah buka blognya lalu buka edit HTML dan silahkan cari kode ini </b:skin> untuk mempercepat pencariannya gunakan Ctrl+F. Bila kode tersebut di atas telah di temukan langsung saja pastekan kode berikut ini tepat di bawah kode </b:skin> tadi.
<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>
Karena blog ini di pasang anti copas dan Ctrl+U maka untuk mendapatkan keseluruhan scriptnya silahkan ketik manual yah atau bisa juga dunlud DISINI. Setelah itu simpan atau save kemudian kita teruskan pada langkah selanjutnya yaitu memperbaiki postingan video dalam artikelnya. contoh bentuk script embed video youtube
<iframe width="420" height="315" src="//www.youtube.com/embed/tFmVmP1hYfx" frameborder="0" allowfullscreen></iframe>
Nah script embed video yang telah ada tersebut tinggal di tambahkan saja dengan sedikit script seperti ini <div class="ResponsiveWrapper"> di awalnya lalu di akhirannya di berikan kode penutup </div> , lihat contoh jadinya seperti di bawah ini.!
<div class="ResponsiveWrapper"><iframe width="420" height="315" src="//www.youtube.com/embed/tFmVmP1hYfx" frameborder="0" allowfullscreen></iframe></div>
Setelah semuanya di lakukan dengan benar sekarang coba cek dengan membuka artikel blog anda yang ada videonya tersebut lalu kecilkan browser anda dan lihat apakah videonya menyesuaikan ukurannya atau tidak, kalau menyesuaikan ukurannya berarti selamat anda telah berhasil meresponsivkan video dalam postingan artikel blog anda. Jangan lupa baca juga tutorial blog yang lainnya yaitu Google SandBox Cara Cek Dan Mengatasinya.
Demikianlah artikel tutorial blog dari Berbagi Informasi Untuk Semua tentang bagaimana Cara Buat Video Responsive Pada Postingan, semoga berguna dan bermanfaat, sekiranya tidak merepotkan bantu kami dengan membagikan atau share artikel ini pada teman teman yang lain agar mereka juga mendapatkan manfaatnya, terimakasih dan sampai jumpa lagi.