Gør alt integreret indhold Responsive med Reframe.js
Den vanskeligste del om indlejring af videoer får bredden og højden korrekt. Disse tal definere aspektforholdet og når de er væk, vil du få en wonky videospiller.
Dette er sandt for alle indlejrede elementer såsom iframes og sociale medier widgets. Og disse ting kan være endnu vanskeligere med lydhørt design, fordi de normalt er ikke lydhøre elementer.
Men med Reframe.js, du kan lave ethvert element, der reagerer på ethvert aspektforhold.
Dette er måske et af de enkleste og mest værdifulde JS-plugins på internettet. Det var faktisk oprettet af Dollar Shave Club som overraskende har sin egen GitHub side.
Reframe er en af deres gratis plugins bygget til udviklere, der ønsker en enklere måde at håndtere responsivt integreret indhold.
Den oplagte synder er indlejret video fra websteder som YouTube og Vimeo. Det er notorisk svært at gøre disse elementer lydhør uden CSS hacks.
Med Reframe.js, du bare Vælg hvilket element du vil målrette mod og reframe det bruger Bookmarklet () fungere.
Start med at tilføje Reframe.js plugin til din webside. Du kan download en kopi fra GitHub, og det er kun 1KB minificeret.
Så er du bare videregive funktionen en vælger for hvilke elementer du vil reframe. Indlæs siden og boom! Du skal være helt indstillet.
Lad os f.eks. Sige, at du har nogle videoer indlejret på dit websted. Du kan Tilføj klassen .video til embedet, og brug det som vælger. omformulere tilføjer automatisk en div og klasse omkring den at skabe den lydhøreste stil.
Så din JavaScript-kode ville se sådan ud:
omformulere ( 'video.');
Rigtig simpel ret?
Denne kode retter sig mod alle elementer i klassen .video og gør dem lydhør. Ingen ekstra hack, ingen ekstra CSS. Indrømmet, at der ikke er noget galt med at bruge CSS-metoden, men du skal manuelt indpakning alle indlejrede videoer med den ekstra klasse.
Reframe bare sparer dig det ekstra trin og bringer det hele igennem med JavaScript. Til tjek en demo og find nogle grundlæggende kodestykker, Besøg Reframe.js hjemmeside. Du kan download en kopi af koden lige fra GitHub repo.
