Rendi tutti i contenuti incorporati reattivi con Reframe.js

La parte più delicata sull'incorporazione dei video sta nel correggere la larghezza e l'altezza. Questi numeri definiscono le proporzioni e quando sono spenti si ottiene un video player stupido .

Questo è vero per tutti gli elementi incorporati come iframe e widget di social media. E queste cose possono essere ancora più complicate con il design reattivo perché di solito non sono elementi di risposta .

Ma con Reframe.js, puoi rendere qualsiasi elemento reattivo per qualsiasi proporzione .

Questo è forse uno dei plugin JS più semplici e più preziosi sul web. In realtà è stato creato da Dollar Shave Club che sorprendentemente ha la sua pagina GitHub.

Reframe è uno dei loro plugin gratuiti creato per gli sviluppatori che desiderano un modo più semplice per gestire contenuti incorporati reattivi .

L'evidente colpevole è il video incorporato da siti come YouTube e Vimeo. È notoriamente difficile rendere questi elementi reattivi senza gli hack CSS.

Con Reframe.js, basta selezionare qualunque elemento tu voglia targetizzare e riformarlo usando la funzione reframe() .

Inizia aggiungendo il plugin Reframe.js alla tua pagina web. Puoi scaricare una copia da GitHub ed è limitata a 1KB.

Quindi, si passa semplicemente la funzione a un selettore per gli elementi che si desidera riformulare. Carica la pagina e il boom! Dovresti essere tutto pronto.

Ad esempio, supponiamo che tu abbia alcuni video incorporati nel tuo sito. Puoi aggiungere la classe .video e usarla come selettore. Reframe aggiunge automaticamente un div e class attorno ad esso per creare lo stile reattivo.

Quindi il tuo codice JavaScript sarebbe simile a questo:

 ridefinire ( 'video.'); 

Abbastanza semplice, vero?

Questo codice punta a tutti gli elementi con la classe .video e li rende reattivi . Nessun hack in più, nessun CSS in più. Certo, non c'è niente di sbagliato nell'usare il metodo CSS, ma è necessario avvolgere manualmente tutti i video incorporati con la classe extra.

Reframe ti fa solo risparmiare quel passo in più e lo porta a termine con JavaScript. Per controllare una demo e trovare alcuni frammenti di codice di base, visita la homepage di Reframe.js. Puoi scaricare una copia del codice direttamente dal repository GitHub.