Gör allt inbäddat innehåll som är responsivt med Reframe.js

Den svåraste delen om inbäddning av videoklipp får bredden och höjden korrekt. Dessa siffror definiera bildförhållandet och när de är ute så kommer du få en wonky videospelare.

Detta är sant för alla inbyggda element som iframes och sociala medier widgets. Och dessa saker kan vara ännu svårare med responsiv design eftersom de vanligtvis är inte responsiva element.

Men med Reframe.js, du kan göra vilket element som är mottagligt för något bildförhållande.

Det här är kanske en av de enklaste men mest värdefulla JS-pluginsna på webben. Det var faktiskt skapad av Dollar Shave Club som överraskande har sin egen GitHub-sida.

Reframe är en av sina gratis plugins byggd för utvecklare som vill ha ett enklare sätt att hantera responsivt inbäddat innehåll.

Den uppenbara skyldige är inbäddad video från webbplatser som YouTube och Vimeo. Det är notoriskt svårt att göra dessa element mottagliga utan CSS hacks.

Med Reframe.js, du bara Välj vilket element du vill rikta in och på reframe det använda reframe () fungera.

Börja med att lägga till Reframe.js-plugin till din webbsida. Du kan ladda ner en kopia från GitHub, och det är bara 1KB minifierat.

Då, du bara överför funktionen en väljare för vilka element du vill reframe. Ladda sidan och boom! Du borde vara helt uppsatt.

Låt oss till exempel säga att du har några videoklipp inbäddade på din webbplats. Du kan lägg till klassen .video- till inbäddat, och använd det som väljare. omformulera lägger automatiskt till en div och klass kring den för att skapa den lyhörda stilen.

Så din JavaScript-kod skulle se ut så här:

reframe ( 'video.');

Ganska enkelt rätt?

Koden riktar sig till alla element i klassen .video- och gör dem lyhörda. Inga extra hackar, ingen extra CSS. Beviljas det är inget fel med att använda CSS-metoden, men du måste manuellt sätta ihop alla inbäddade videoklipp med extraklassen.

Reframe just sparar dig det extra steget och tar det hela med JavaScript. Till kolla in en demo och hitta några grundläggande kodutdrag, besök Reframe.js hemsida. Du kan ladda ner en kopia av koden rakt från GitHub repo.