Vložení videa z Facebooku na web

Pokud chceme na vlastní web vložit Facebook video, existuje k tomu na stránce s videem možnost Embed post.

To nám připraví HTML kód a JavaScript, který připojí Facebook SDK, které oživí video.

<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/all.js#xfbml=1"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-post" 
data-href="https://www.facebook.com/video.php?v=796588687069516" 
  data-width="466"
>
  <div class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/video.php?v=796588687069516">Post</a> by <a href="https://www.facebook.com/jecas.cz">Je čas</a>.
  </div>
</div>

Po vložení na stránku to vypadá takto (živá ukázka):

Nevýhoda tohoto postupu je, že výše uvedený kód vytvoří 34 HTTP požadavků a stáhne cca 0,5 MB dat.

Vložení jako <iframe>

Na rozdíl od YouTube není snadno k disposici možnost vložit video na vlastní web pomocí <iframe>. Naštěstí se ale k universálnímu kódu pro <iframe> dá dopátrat skrze Graph API.

<iframe 
  src="https://www.facebook.com/video/embed?video_id=796588687069516"
  width="480" height="270" frameborder="0"
>
</iframe>

Samostatná ukázka

URL stránky vložitelné do frame je tedy: https://www.facebook.com/video/embed?video_id=796588687069516

Tento způsob je sice o trochu úspornější než předchozí – 22 požadavků a 0,43 MB, ale pořád to není žádná sláva.

Výhoda ale spočívá v tom, že s <iframe>m půjde snáze provést lazy loading.

Lazy loading

Podobně jako u videí z YouTube můžeme vytvořit na stránce atrapu, která <iframe> s videem načte až na vyžádání.

Bohužel v tomto případě půjde obtížněji získat náhled videa. Neexistuje nějaká universální adresa, kde by stačilo změnit ID a obrázek by byl na světě. URL obrázku jde získat jedině přes Graph API.

Automatické přehrávání Facebook videa

Spustit video rovnou při načtení není normálně dosažitelné. Jde ale využít mobilní verse, kde to funkční je (ukázka).

<iframe 
  src="https://m.facebook.com/video/video.php?v=796588687069516" 
  frameborder="0" 
  allowfullscreen
>
</iframe>