Rendi tutti i contenuti incorporati reattivi con Reframe.js

La parte più difficile incorporare video sta ottenendo la larghezza e l'altezza corrette. Questi numeri definire le proporzioni e quando saranno fuori lo farai ottenere un video player stupido.

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

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

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

Reframe è uno dei loro plugin gratuiti costruito per sviluppatori che vogliono un modo più semplice di gestione del contenuto incorporato reattivo.

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

Con Reframe.js, devi solo selezionare qualunque elemento tu voglia targetizzare e reframe it usando il ristrutturare () funzione.

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

Quindi, semplicemente passare la funzione un selettore per tutti gli elementi che desideri riformulare. Carica la pagina e boom! Dovresti essere tutto pronto.

Ad esempio, supponiamo che tu abbia alcuni video incorporati nel tuo sito. Puoi aggiungi la classe .video verso l'embed, e usalo come selettore. ristrutturare aggiunge automaticamente un div e classe attorno ad esso per creare lo stile reattivo.

Quindi il tuo Codice JavaScript sarebbe simile a questo:

ridefinire ( 'video.');

Semplicemente semplice?

Questo codice riguarda tutti gli elementi con la classe .video e li rende reattivi. Nessun hack extra, 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 just ti salva quel passaggio in più e porta tutto con JavaScript. A controlla una demo e trova alcuni frammenti di codice di base, visita la homepage di Reframe.js. Puoi scarica una copia del codice direttamente dal repository GitHub.