Categorie
Senza categoria

Incorporare un video YouTube in modo responsive

Molto spesso capita di dover incorporare un video caricato su YouTube o Vimeo ma con molto traffico web proveniente da dispositivi mobili come spartphone e tablets è fondamentale che questi elementi incorporati siano responsive.

Analizziamo il problema

Se noi vogliamo incorporare il seguente video caricato su YouTube sul nostro sito web:

Questo è il codice che YouTube ci fornice:

<iframe width="1903" height="768" src="https://www.youtube.com/embed/62uKFlNVZ1w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Osservando questo frammento di codice notiamo subito che la larghezza e l’altezza sono dichiarate staticamente! Questa non è mai una buona idea in siti web con dei contenitori fluidi che si adattano allo schermo.

Per risolvere questo problema possiamo utilizzare due tecniche, la prima utilizzando solamente CSS, la seconda comprende un plugin jQuery.

Proviamo una soluzione

La prima cosa che potremmo provare a fare, è forzare la larghezza al 100% (width = 100%) e l’altezza ad auto (height = auto), ma in questo modo otterremmo un’altezza fissa di 150px, inutilizzabile nella maggior parte dei casi.

Piccola curiosità: l’altezza di 150px, è dovuta al fatto che quasi tutti i browser renderizzano gli iframe, le canvas e gli embed come rettangoli 300x150px se queste proprietà non vengono dichiarate.

Risolviamo con CSS

Il metodo più semplice di risolvere il nostro problema è utilizzando qualche riga di CSS.

Con questa tecnica andremo ad avvolgere il nostro iframe (privo di attributi width e height) in un elemento con che ha un rapporto intrinseco, poi daremo al nostro video una posizione absolute. Questo risulterà in una larghezza fluida e un’altezza corretta.

<div class="video-responsive">
     <iframe src="https://www.youtube.com/embed/62uKFlNVZ1w" allowfullscreen=""</iframe>
</div>
.video-responsive{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Funzionamento del metodo CSS

Questo è un metodo molto semplice, e funziona, ma ha un problema fondamentale: tutti i video devono avere lo stesso aspect ratio, in caso contrario otterrete delle barre nere.

Questo è dovuto al valore del padding-bottom del container, fissato a 56,25%, ma perché proprio a questo valore? Per scoprirlo guardiamo la formula con cui possiamo ricavarlo:

Quindi, se per esempio il nostro video è largo 560 e alto 349, il nostro padding dovrà essere 62,32%, ben diverso dal 56,25% che abbiamo impostato, numero valido per i video con un aspect ratio di 16:9 come per esempio un video 1920×1080.

La soluzione JavaScript

Il primo problema della soluzione precedente è che non tutti potrebbero essere in grado di utilizzarla: richiede di wrappare l’elemento iframe dentro un altro contenitore e rimuovere gli attributi predefiniti, togliendo la semplicità del Copia & Incolla dai video di YouTube. Inoltre, se non abbiamo controllo su quello che verrà inserito nell’embed, sarà necessario che sia compatibile con tutti i vari formati di video, non solo 16:9.

In questo caso ci viene in soccorso FitVids.js, una libreria jQuery che certa i video presenti nella pagina e aggiunge automaticamente il wrapper HTML e le regole CSS che abbiamo visto prima, solo che l’aspect ration viene calcolato automaticamente. Inoltre è molto semplice da utilizzare!

$('#elemento-con-video').fitVids();

Per maggiori informazioni visitate il sito di FitVids e la pagina GitHub.

Categorie
Senza categoria

Torna a Windows 98 con 98.CSS

98.css è una libreria CSS creata da Jordan Scales per realizzare interfacce web moderne con lo stile di Windows 98, uno dei primi sistemi operativi desktop diffusi.

Questa libreria sfrutta l’utilizzo dei tag semantici di HTML, associando ad essi uno stile personalizzato. Per esempio, per creare un bottone dovrai utilizzare il tag <button>. Gli elementi di input richiedono delle etichette. I pulsanti icona si basano su aria-label.

Ovviamente è possibile personalizzare l’aspetto della libreria sovrascrivere lo stile predefinito, mantenendo comunque il suo aspetto. Se per esempio desideriamo aumentare il margine di un bottone, sarà sufficiente rimpiazzarlo. Se vogliamo dare un colore diverso al testo, possiamo farlo.

98.css non include nessun JavaScript, il suo scopo è solamente quello di dare un aspetto diverso ad HTML, quindi è compatibile con qualsiasi framework per lo sviluppo frontend, come React o jQuery.

Il modo più semplice e veloce di iniziare ad utilizzare 98.css è quello di importarla da unpkg.

<link rel="stylesheet" href="https://unpkg.com/98.css">

Inoltre puoi installare 98.css dalla pagina releases su GitHub o da npm.

npm install 98.css

Ecco un esempio di applicazione realizzata con 98.css

Qui puoi vedere un esempio di 98.css utilizzato React, e qui un esempio con JavaScript.

Per ulteriori informazioni visita il sito ufficiale del progetto.