Vložiť Responsive videa ľahko s SuperEmbed.js

Moderný web je plne reagovať a ďalší dizajnéri to realizujú každý deň. Ale je tu jedna zložitá výzva, pokiaľ ide o reakcie na dizajn: vložený obsah.

Každá stránka videa od YouTube do Vimeo má predvolený kód vloženia fixované na určitú veľkosť. To znamená, že vývojári potrebujú použiť iné riešenia vytvorte plne citlivé videá.

Namiesto použitia triedy kontajnerov CSS však môžete použiť SuperEmbed.js, zadarmo knižnica JavaScript pre vytváranie citlivých videí.

Tento doplnok rieši dva problémy naraz. Všetky vložené videá budú natiahnite hlavný kontajner, pričom je dostatočne flexibilný veľkosť v závislosti od okna prehliadača.

Najlepšie je, že SuperEmbed.js nevyžaduje žiadny ďalší kód, takže môžete len vložte súbory a Nechajte ich bežať. Táto knižnica JS sa o zvyšok stará zacielenie na vložené prvky z určitých stránok.

Všetky videá zachovať ich špecifické pomery strán, takže sa nemusíte obávať o hrejivých rozmeroch. A SuperEmbed funguje ako vanilková JS knižnica s žiadne závislosti ako napríklad jQuery.

Práve teraz, SuperEmbed podporuje 15 alebo viac videí z lokalít ako YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me a Archive.org (medzi mnohými ďalšími). Tento zoznam je stále rastie, preto očakávajte, že sa v priebehu času budú pridávať ďalšie služby streamingu videa.

Ak chcete, aby tento nástroj fungoval, stačí stiahnuť knižnicu a pridajte ho do záhlavia vášho webu ako:

Môžete si stiahnuť úplne kopírovať z replikácie GitHub, ktorá obsahuje aj špecifikácie pre podporovaných webových stránok s videom a aktuálnu podporu prehliadača.

Z väčšej časti, SuperEmbed podporuje všetky moderné prehliadače od FireFoxu 3.5+, Chrome 4+ a verzie programu Internet Explorer 9 alebo vyššej.

Jedná sa o veľmi pôsobivú knižnicu so zreteľom na všetku podporu prehliadača a ako dobre pracuje priamo z krabice. Je to oveľa jednoduchšie riešenie ako CSS hacks, ak máte v poriadku spoliehať sa na JavaScript.

Môžeš nájsť viac informácií na GitHub a môžete to vidieť živý beh v tomto husle.