Incorpora facilmente i video reattivi con SuperEmbed.js

Il web moderno è pienamente reattivo e altri 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 ad una certa dimensione Ciò significa che gli sviluppatori devono utilizzare altre soluzioni per creare video pienamente reattivi.

Tuttavia, invece di usare una classe contenitore CSS, puoi usare SuperEmbed.js, una libreria JavaScript gratuita per creare video reattivi.

Questo plugin risolve due problemi subito. Tutti i video incorporati lo faranno allungare per riempire il contenitore principale, pur essendo abbastanza flessibile per ridimensiona in base alla finestra del browser.

La parte migliore è che SuperEmbed.js non richiede codice aggiuntivo, quindi puoi solo incorporare i file e Lasciali correre. Questa libreria JS si occupa di tutto il resto targeting di elementi incorporati da determinati siti.

Tutti i video mantenere i loro rapporti di aspetto specifici, quindi non devi preoccuparti delle dimensioni infelici. E SuperEmbed funziona come un libreria JS vaniglia con nessuna dipendenza come jQuery.

In questo momento, SuperEmbed supporta più di 15 incorporamenti video da siti come YouTube, Vimeo, Kickstarter, DailyMotion, Facebook, Vid.me e Archive.org (tra molti altri). Questa lista è ancora in crescita, quindi aspettati di aggiungere più servizi di streaming video nel tempo.

Per far funzionare questo strumento, è sufficiente scarica la libreria e aggiungilo all'intestazione del tuo sito così:

Puoi scaricare a copiare completamente dal repository GitHub che include anche le specifiche per siti video supportati e supporto browser corrente.

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 funziona subito fuori dagli schemi. È una soluzione molto più semplice rispetto agli hack CSS se stai bene affidandoti a JavaScript.

Potete trovare maggiori informazioni su GitHub e puoi vederlo live running in questo violino.