Caricamento condizionale dei contenuti con matchMedia

Tutte le soluzioni che abbiamo visto finora hanno una cosa in comune: si esegue un'azione quando il criterio stabilito in una media query viene soddisfatto. Javascript offre per questo scopo un metodo nativo:

. Al momento il supporto sui vari browser è il seguente:

Per estendere il supporto possiamo usare un polyfill,

.

Come funziona matchMedia

Il funzionamento di matchMedia è molto intuitivo:

if (window.matchMedia("(min-width: 600px)").matches) {
  // esegui questa azione;
}

Che è equivale a dire:

se (la larghezza di questa finestra è >= 600px) {
  // esegui questa azione;
}

Chiaramente, la parte relativa alla media query potrà essere valorizzata e strutturata con tutte le

previste dai CSS3.

Applicazione nel progetto

Una prima applicazione pratica di matchMedia nel

la troviamo nella gestione del video in evidenza.

Per ottimizzare i tempi di caricamento sugli smartphone, decidiamo di partire, nel codice HTML, da questa struttura:

<section id="video-evidenza">
 <div id="frame-container">
 <a href="http://www.youtube.com/watch?v=RdIh8GiVR9I" target="_blank">
 <img src="video-frame.jpg" class="media--block scala" alt="">
 </a>
 <p class="didascalia">
 <a href="http://www.youtube.com/watch?v=RdIh8GiVR9I" target="_blank">The Street Aesthetic of New York</a>
 </p>
 </div>
</section>

Non carichiamo direttamente il video, ma lasciamo un'immagine segnaposto che punta con un link al video. Inseriamo un link anche nella breve descrizione che segue.

Quando e se la finestra ha una larghezza minima di 600px, sostituiamo l'immagine con il video. Un caso ideale per usare matchMedia.

Ecco lo script:

if (window.matchMedia("(min-width: 600px)").matches) {
 (function (win) {
   var doc = win.document;
   var sez = doc.getElementById('video-evidenza');
   var frame = document.getElementById("frame-container");
   if (frame) {
    sez.removeChild(frame);
    var vidCont = document.createElement('div');
    vidCont.setAttribute('class', 'video-container');
    sez.appendChild(vidCont);
    vidCont.innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/RdIh8GiVR9I" frameborder="0" allowfullscreen></iframe>';
   }
 })(this);
}

La funzione che eseguiamo quando la media query corrisponde prevede nell'ordine:

1. la rimozione del div con id#frame-container (quello che racchiude l'immagine segnaposto);
2. la creazione di un nuovo div;
3. l'assegnazione a quest'ultimo della classe .video-container;
4. l'inserimento di questo div come figlio dell'elemento section con id#video-evidenza;
5. l'inserimento nel nuovo div come HTML del codice di embed preso da YouTube.

E così su tablet e desktop possiamo goderci il video direttamente nella finestra del browser.

Video fluido e flessibile

Un ultimo ritocco. Se provate a restringere e allargare la finestra del browser visualizzando la

, noterete che il video è fluido, si adatta proporzionalmente alle dimensioni del suo contenitore. Per ottenere il risultato basta associare queste regole CSS al div che contiene il video e che per noi ha la classe .video-container:

/* Video responsivo */
.video-container {
 position: relative;
 margin-bottom: 15px;
 padding-bottom: 56.25%;
 width: 100%;
 height: 0;
}
.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

In realtà sono regole necessarie solo per i video incorporati con un iframe come quelli di YouTube. Se si usa l'elemento HTML video, basterà usare, come per le immagini flessibili, max-width: 100%;.