Gjør alt innebygd innhold responsivt med Reframe.js

Den vanskeligste delen om innebygde videoer får bredden og høyden riktig. Disse tallene definer aspektforholdet og når de er ute, vil du få en wonky videospiller.

Dette er sant for alle innebygde elementer som iframes og sosiale medier widgets. Og disse tingene kan være enda vanskeligere med responsiv design fordi de vanligvis er ikke responsive elementer.

Men med Reframe.js, du kan lage ethvert element som reagerer på et hvilket som helst aspektforhold.

Dette er kanskje en av de enkleste og mest verdifulle JS-plugins på nettet. Det var faktisk skapt av Dollar Shave Club som overraskende har sin egen GitHub side.

Reframe er en av sine gratis plugins bygget for utviklere som ønsker en enklere måte å håndtere responsivt innebygd innhold.

Den åpenbare synderen er innebygd video fra nettsteder som YouTube og Vimeo. Det er beryktet vanskelig å gjøre disse elementene lydhøre uten CSS hacks.

Med Reframe.js, du bare å velge uansett element du vil målrette mot og reframe det bruker reframe () funksjon.

Begynn med å legge til Reframe.js-pluginet på nettsiden din. Du kan last ned en kopi fra GitHub, og det er bare 1KB minifisert.

Så, bare du pass funksjonen en velger for hvilke elementer du vil reframe. Legg inn siden og boom! Du burde være alt satt.

For eksempel, la oss si at du har noen videoer som er innebygd på nettstedet ditt. Du kan legg til klassen .video til embedet, og bruk det som väljare. reframe legger automatisk en div og klasse rundt den å skape den responsive stilen.

Så din JavaScript-kode ville se slik ut:

reframe ( 'video.');

Ganske enkelt rett?

Denne koden retter seg mot alle elementene med klassen .video og gjør dem lydhør. Ingen ekstra hack, ingen ekstra CSS. Gitt det er ikke noe galt med å bruke CSS-metoden, men du må manuelt vikle alle innebygde videoer med den ekstra klassen.

Reframe bare sparer deg det ekstra trinnet og bringer alt sammen med JavaScript. Til sjekk ut en demo og finn noen enkle kodestykker, besøk Reframe.js hjemmeside. Du kan last ned en kopi av koden rett fra GitHub repo.