Membuat Responsive Facebook Video Di Blog

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

Dan kebetulan, video dari Facebook tersebut tidak responsive sehingga kurang elok kalau di simpan di blog yang memakai template responsive. Untuk itu kini selain sharing cara menyimpan embed video Facebook, juga cara menciptakan 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 arahan embed video dari Facebook silahkan lihat pada gambar animasi gif di bawah ini.


Dan arahan embed yang didapat akan tampak menyerupai 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 yaitu Safer Internet Day- sebuah hari yang didedikasikan untuk menginformasikan ke masyarakat cara kondusif dalam memakai internet dan teknologi mobile. Sebagai bab dari perayaan global, Facebook bermitra dengan organisasi keamanan berinternet untuk mengatakan sejumlah cara biar banyak pihak sanggup bantu-membantu 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 arahan embed yang didapat dari langkah pertama, kita mendapat 3 jenis arahan yaitu arahan javascript Facebook SDK, HTML embed video, dan blockquote video tersebut.

Jika di blog sudah terdapat javascript Facebook SDK, maka hapus arahan Facebook SDK dari arahan di atas tersebut, kalau belum ada silahkan pindahkan kodenya ke edit HTML blog dan simpan di atas arahan </body>.

Kemudian arahan yang menyerupai di bawah ini.

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

Nah arahan HTML tersebutlah yang disimpan di postingan. Namun sebelumnya tambahkan dulu kode https://www.facebook.com di depan url video-nya, kalau tidak maka video-nya tidak akan tampil, sehingga menjadi menyerupai 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 menciptakan video Facebook tersebut menjadi responsive, silahkan simpan arahan CSS di bawah ini di atas kode ]]></b:skin> atau </style>

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

Selesai....maka kini video Facebook akan tampil responsive di postingan Anda menyerupai video di bawah ini yang aku ambil dari halaman Facebook Indonesia.


Sumber https://www.kompiajaib.com/

Share this post