Naredite vse vdelane odzive na vsebino z orodjem Reframe.js

Najtežji del o tem vdelava videoposnetkov postaja pravilna širina in višina. Te številke določite razmerje stranic in ko bodo odšli dobite neroden video predvajalnik.

To je velja za vse vdelane elemente kot so okvirji in gradniki za družabne medije. Te stvari so lahko še bolj zahtevne pri odzivnem oblikovanju, ker so običajno ne odzivni elementi.

Toda z Reframe.js, lahko narediš vsak element, ki se odziva na katero koli razmerje stranic.

To je morda eden najpreprostejših in najbolj dragocenih vtičnikov JS na spletu. Pravzaprav je bilo ustvaril Dollar Shave Club ki ima presenetljivo svojo GitHub stran.

Reframe je enega od njihovih brezplačnih vtičnikov zgrajena za razvijalce, ki želijo enostavnejši način ravnanje z odzivno vgrajeno vsebino.

Očiten krivec je vgrajen video iz spletnih mest, kot sta YouTube in Vimeo. Znano je Te elemente je težko prilagoditi brez CSS hack.

Z Reframe.js ste prav izberite ne glede na element, ki ga želite ciljati in preoblikuje uporabljati preoblikovanje () funkcijo.

Začnite z dodajanjem dodatka Reframe.js na svojo spletno stran. Ti lahko prenesite kopijo od GitHub, in to je samo 1KB minified.

Potem, samo vi preklopite funkcijo izbirnik za katere koli elemente, ki jih želite preoblikovati. Naložite stran in boom! Vsi bi morali biti pripravljeni.

Recimo, da imate na vašem spletnem mestu nekaj vdelanih videoposnetkov. Ti lahko dodajte razred .video na embed, in jo uporabite kot izbirnik. Spremeni okvir samodejno doda div in razred okoli njega ustvarite odzivni slog.

Tvoja JavaScript koda bi izgledal takole:

okvir („video“);

Precej preprosto?

Ta koda cilja na vse elemente razreda .video in jih odziva. Brez dodatnih hack, brez dodatnih CSS. Odobreno je, da z uporabo metode CSS ni nič narobe, vendar boste morali ročno ovijte vse vdelane videoposnetke z dodatnim razredom.

Preuredi samo vam prihrani ta dodatni korak in vse to prinaša z JavaScriptom. Za poglej demo in poiščite nekaj osnovnih odrezkov kode, obiščite domačo stran Reframe.js. Ti lahko prenesete kopijo kode naravnost iz replike GitHub.