Jak vložit na web video z facebooku?

Jak vložit na web vide/gif?

Konečně jsem se dostala k tomu připravit pro moji jinou facebook stránku „nějaký hejblátka“ – v podobě gifu (tedy obrázku, který sestává z řady snímků spouštěných za sebou v určitých intervalech). A samozřejmě, tyto příspěvky jsou časově i energeticky náročnější na přípravu, takže když už, tak ho využít pořádně. Gif prostě musel přijít i na web.

Všechny moje weby jedou na WordPressu, ale ono to bude všude vcelku podobné.

Pokud chceme vložit na web video (nebo gif), potřebujeme ho mít nejdřív někde nahrané. Nahrávat videa přímo k nám do systému, tak jako to děláme s obrázky, není dobrá volba. WordPress má přednastevené omezení, co se týče velikosti nahrávaných souborů. Dále by nám to zbytečně vytěžovalo kapacitu a zabíralo prostor, možná by to ani nefungovalo. Využijeme tu tak stejný princip, jako se používá při vkládání videí z YouTube. Video vložíme na web přes iframe (vnořený rám) a „sosáme“ ho právě z YouTube nebo facebooku. Na našem webu vlastně přehráváme něco, co je uložené někde úplně jinde.

A jak to tedy uděláme?

1+2. Na facebooku si otevřeme naše video a v pravo nahoře klikneme na tři tečky a vybereme „vložit“ (1). Objeví se nám okno s kódem začínajícím <iframe… . Ten zkopírujeme (2).

Jak vložit video z facebooku na blog

Jak vložit video z facebooku na blog

3. Najdeme si stránku/příspěvek u nás v systému, kam chceme video vložit. Přepneme si na HTML editor a kód vložíme (3). Teď už stačí jen uložit a video v základní podobě máme vložené. Doporučuju ale uložit zatím jako koncept.

Jak vložit video na blog - z facebooku

ALE… facebook při vkládání videa nepočítá s responzivitou. To znamená, že velikost videa se nemění v závislosti na velikosti okna nebo zařízení, na kterém se video přehrává.

Toto ale můžeme dále jednoduše upravit… Pouze potřebujeme mít přístup k css kódu.

Pokračujeme tedy v úpravách, a to následovně:

4. Upravíme náš vložený HTML kód tak, že před něj vložíme

<div class="fb-responsive">

a za něj  </div>

Obalíme ho tak dalším div a to nám umožní s ním manipulovat.

Jak vložit video z facebooku na blog

5+6. Nyní stačí upravit css kód pro náš nový div a iframe v něm. Buď to můžeme udělat jednoduše přidáním kódu k šabloně (5, viz dále) nebo můžeme přímo editovat style.css naší šablony.

Jak vložit video na blog - z facebooku

Vložíme tam následující řádky (6):

.fb-responsive {
overflow:hidden;
position:relative;
padding-bottom:100%; /*pro čtvercová videa*/
height:0;
}

.fb-responsive iframe {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}

Jak vložit video na blog - z facebooku

Jak uvádím v kódu, padding-bottom: 100% platí pro čtvercová videa. To procento vyjadřuje poměr stran, tedy jakou výšku má video vzhledem k šířce. Pokud dáme například 50%, bude mít video rozměry například 100px na 50px. Ještě třeba dodat, že tímto postupem neupravujeme velikost videa jako takovou, ale de facto tím nastavujeme, jak velká část z videa má být vidět.

7. Po uložení css jdeme zpět na článek a zobrazíme si jeho náhled. Video by mělo být přes celé okno obsahu a při zmenšení okna prohlížeče by se mělo zmenšovat také. Pokud změny nevidíte, je pravděpodobné, že potřebujete vymazat mezipaměť (cache).

PS: pokud vás zajímá, jak takové vložené video/gif vypadá, můžete na něj mrknout na dify.

 

 

Komentovat

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Můžete použít tyto HTML značky a atributy:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Po odeslání musí být komentář ručně schválen, aby nebyla diskuse plná spamu :). Bude proto chvíli trvat, než se komentář pod příspěvkem zobrazí. Díky!