Search This Blog


Membuat Responsive Facebook Video Di Blog

Membuat Responsive Facebook Video Di Blog
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.

Responsive Facebook Video Di Blog

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/

Artikel Kemarin
Next Post »

3 komentar

Click here for komentar
Dewi Aja
admin
26 November 2015 at 20:37 ×

bagussssss.

Perkenalkan, saya dari tim kumpulbagi. Saya ingin tau, apakah kiranya anda berencana untuk mengoleksi files menggunakan hosting yang baru?
Jika ya, silahkan kunjungi website ini www.kumpulbagi.com untuk info selengkapnya.

Di sana anda bisa dengan bebas share dan mendowload foto-foto keluarga dan trip, music, video, filem dll dalam jumlah dan waktu yang tidak terbatas, setelah registrasi terlebih dahulu. Gratis :)

Reply
avatar
24 January 2016 at 06:59 ×

TERIMA KASIH SUDAH MAU MAMPIR MBAK #DEWI_AJA IYA NANTI SAYA KUNJUNGI

Reply
avatar
Thanks for your comment