Vkládání citlivých videí snadno pomocí SuperEmbed.js

Moderní web je plně reagující a více designérů si to uvědomuje každý den. Pokud jde o citlivý design, je tu jedna otravná výzva: vložený obsah.

Každé video stránky z YouTube do Vimeo mají výchozí kód pro vložení na určitou velikost. To znamená, že vývojáři potřebují použít jiná řešení vytvářet plně citlivá videa.

Místo použití třídy kontejneru CSS však můžete použít SuperEmbed.js, zdarma JavaScript knihovna pro vytváření citlivých videí.

Tento plugin řeší dva problémy najednou. Všechna vložená videa budou natáhnout hlavní nádobu, a zároveň dostatečně flexibilní změnit velikost podle okna prohlížeče.

Nejlepší je, že SuperEmbed.js nevyžaduje žádný další kód, takže můžete prostě vložit soubory a nechte je běžet. O zbytek se stará knihovna JS cílení vložených prvků z určitých stránek.

Všechna videa zachovat své specifické poměry stran, takže se nemusíte starat o šikmé rozměry. A SuperEmbed funguje jako knihovna vanilky JS s žádné závislosti například jQuery.

Právě teď, SuperEmbed podporuje 15 + video vložení z webů jako YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me a Archive.org (mezi mnoha dalšími). Tento seznam je stále rostoucí, tak očekávejte, že v průběhu času budou přidány další služby streamování videa.

Chcete-li tento nástroj pracovat, stačí stáhnout knihovnu a přidejte ho do záhlaví vašeho webu jako tak:

Můžete si stáhnout a plně kopírovat z repo GitHub, která také obsahuje specifikace pro podporovaných webových stránek a aktuální podpora prohlížeče.

Z velké části, SuperEmbed podporuje všechny moderní prohlížeče z aplikací FireFox 3.5+, Chrome 4+ a verzí aplikace Internet Explorer 9 nebo vyšší.

Jedná se o velmi působivou knihovnu s ohledem na veškerou podporu prohlížeče a jak dobře funguje hned po vybalení z krabice. Je to mnohem jednodušší řešení než hacky CSS, pokud jste v pořádku se spoléháním na JavaScript.

Můžeš najít více informací na GitHub a můžete to vidět živě běží v tomto housle.