Membuat Responsive Facebook Video Di Blog

Baca Juga

Ternyata untuk menyimpan embed video dari Facebook tidak hanya copy paste kode embed video facebook, namun harus diedit lagi terlebih dahulu, jika tidak maka videonya tidak akan tampil.

Dan kebetulan, video dari Facebook tersebut tidak responsive sehingga kurang bagus jika di simpan di blog yang menggunakan template responsive. Untuk itu kini selain sharing cara menyimpan embed video Facebook, juga cara membuat video Facebook menjadi responive.

Yang ingin mencoba menyimpan video responsive dari Facebook untuk disimpan di postingan blog, silahkan ikuti langkahnya di bawah ini.

Langkah Pertama

Untuk mengambil kode embed video dari Facebook silahkan lihat pada gambar animasi gif di bawah ini.

Dan kode embed yang didapat akan tampak seperti di bawah ini.

<div id="fb-root"></div><script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-video" data-allowfullscreen="1" data-href="/FacebookIndonesia/videos/vb.249443538526027/568758073261237/?type=1"><div class="fb-xfbml-parse-ignore"><blockquote cite="/FacebookIndonesia/videos/568758073261237/"><a href="/FacebookIndonesia/videos/568758073261237/"></a><p>Hari ini adalah Safer Internet Day- sebuah hari yang didedikasikan untuk menginformasikan ke masyarakat cara aman dalam menggunakan internet dan teknologi mobile. Sebagai bagian dari perayaan global, Facebook bermitra dengan organisasi keamanan berinternet untuk menunjukkan sejumlah cara agar banyak pihak bisa bersama-sama membangun internet yang aman. Untuk tahu lebih lanjut, lihat video dari Sheryl Sandberg, Chief Operating Officer.</p>Posted by <a href="https://www.facebook.com/FacebookIndonesia">Facebook</a> on Monday, February 9, 2015</blockquote></div></div>

Langkah Kedua

Dari kode embed yang didapat dari langkah pertama, kita mendapatkan 3 jenis kode yaitu kode javascript Facebook SDK yang berwarna hijau, HTML embed video yang berwarna cyan, dan blockquote video tersebut yang berwarna orange.

Jika di blog sudah terdapat javascript Facebook SDK seperti kode yang berwarna hijau, maka hapus kode yang berwarna hijau di atas tersebut, jika belum ada silahkan pindahkan kode yng berwarna hijau tersebut ke edit HTML blog dan simpan di atas kode </body>.

Kemudian silahkan hapus kode yang berwarna orange, sehingga hanya tinggal kode yang berwarna cyan seperti di bawah ini.

<div class="fb-video" data-allowfullscreen="1" data-href="/FacebookIndonesia/videos/vb.249443538526027/568758073261237/?type=1"></div>

Nah kode HTML tersebutlah yang disimpan di postingan. Namun sebelumnya tambahkan dulu kode https://www.facebook.com di depan url video-nya, jika tidak maka video-nya tidak akan tampil, sehingga menjadi seperti di bawah ini

<div class="fb-video" data-allowfullscreen="1" data-href="https://www.facebook.com/FacebookIndonesia/videos/vb.249443538526027/568758073261237/?type=1"></div>

Langkah Ketiga

Untuk membuat video Facebook tersebut menjadi responsive, silahkan simpan kode CSS di bawah ini di atas kode ]]></b:skin> atau </style>

.fb-video,.fb-video span,.fb-video iframe{width:100%!important}

Selesai....maka sekarang video Facebook akan tampil responsive di postingan Anda seperti video di bawah ini yang saya ambil dari halaman Facebook Indonesia.

dari : http://www.kompiajaib.com/