Incorpora facilmente i video reattivi con SuperEmbed.js

Il web moderno è pienamente reattivo e molti designer lo stanno realizzando ogni giorno. Ma c'è una sfida fastidiosa quando si tratta di design reattivo: contenuto incorporato .

Ogni sito di video da YouTube a Vimeo ha un codice di incorporamento predefinito fissato a una certa dimensione. Ciò significa che gli sviluppatori devono utilizzare altre soluzioni per creare video pienamente reattivi .

Tuttavia, anziché utilizzare una classe contenitore CSS, puoi utilizzare SuperEmbed.js, una libreria JavaScript gratuita per la creazione di video reattivi .

Questo plugin risolve due problemi contemporaneamente. Tutti i video incorporati si estenderanno per riempire il contenitore principale, pur essendo abbastanza flessibili da ridimensionare in base alla finestra del browser .

La parte migliore è che SuperEmbed.js non richiede codice aggiuntivo, quindi puoi semplicemente incorporare i file e lasciarli funzionare . Questa libreria JS si occupa di tutto il resto indirizzando gli elementi incorporati da determinati siti .

Tutti i video mantengono i loro rapporti di aspetto specifici, quindi non devi preoccuparti delle dimensioni infondate. E SuperEmbed funziona come una libreria JS vanilla senza dipendenze come jQuery.

Al momento, SuperEmbed supporta oltre 15 video incorporati da siti come YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me e Archive.org (tra molti altri). Questo elenco è ancora in crescita, quindi aspettatevi ulteriori servizi di streaming video da aggiungere nel tempo.

Per far funzionare questo strumento, devi solo scaricare la libreria e aggiungerla all'intestazione del tuo sito in questo modo:

È possibile scaricare una copia completa dal repository GitHub che include anche le specifiche per i siti di video supportati e il supporto corrente del browser .

Per la maggior parte, SuperEmbed supporta tutti i browser moderni da FireFox 3.5+, Chrome 4+ e versioni di Internet Explorer 9 o successive.

Questa è una libreria molto impressionante considerando tutto il supporto del browser e quanto bene funzioni fin da subito . È una soluzione molto più semplice rispetto agli hack CSS se stai bene affidandoti a JavaScript.

Puoi trovare maggiori informazioni su GitHub e puoi vederlo dal vivo in esecuzione in questo violino.