Vdelaj odzivne videoposnetke z lahkoto s SuperEmbed.js

Sodoben splet je popolnoma odziven in več oblikovalcev to uresničuje vsak dan. Toda pri odzivnem oblikovanju obstaja en nadležen izziv: vdelana vsebina.

Vsako video mesto z YouTube na Vimeo ima a privzeta koda za vdelavo določene velikosti. To pomeni, da morajo razvijalci uporabiti druge rešitve ustvarite popolnoma odzivne videoposnetke.

Vendar lahko namesto uporabe kontejnerskega razreda CSS uporabite SuperEmbed.js, brezplačno knjižnico JavaScript za ustvarjanje odzivnih videoposnetkov.

Ta vtičnik rešuje dva problema naenkrat. Vsi vdelani videoposnetki bodo raztegnite, da zapolnite glavno posodo, hkrati pa je dovolj prilagodljiv spremenite velikost glede na okno brskalnika.

Najboljši del je ta SuperEmbed.js ne zahteva dodatne kode, tako da lahko samo vdelajte datoteke in naj tečejo. Ta knjižnica JS skrbi za ostalo ciljanje vdelanih elementov z določenih spletnih mest.

Vsi videoposnetki ohranijo svoje specifične razmerje med obema stranema, zato vam ni treba skrbeti za neverjetne dimenzije. In SuperEmbed deluje kot vanilla JS knjižnica z brez odvisnosti kot je jQuery.

Zdaj, SuperEmbed podpira 15 vdelov za video na straneh, kot so YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me in Archive.org (med mnogimi drugimi). Ta seznam je še vedno raste, tako pričakujte, da se bodo sčasoma dodali še več storitev pretočnega videa.

Da bi to orodje delovalo, morate prenesite knjižnico in dodajte jo v glavo spletnega mesta tako:

Lahko prenesete a v celoti kopirajte od repo GitHub, ki vključuje tudi očala podprte spletne strani z videoposnetki in trenutno podporo brskalnika.

Večinoma SuperEmbed podpira vse sodobne brskalnike od FireFox 3.5+, Chrome 4+ in različic Internet Explorerja 9 ali novejših.

To je zelo impresivna knjižnica, ki upošteva vso podporo brskalniku in kako dobro je deluje takoj. To je precej enostavnejša rešitev od CSS hackov, če se zanašate na JavaScript.

Lahko najdeš več informacij na GitHubu in ga lahko vidite v živo v tej gosli.