Membuat Responsive Facebook Video Di Blog

Membuat Responsive Facebook Video Di Blog

Bola Hero Gawai

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×