mercoledì 25 giugno 2014

Video Player Responsive: un semplice tutorial per incorporare video in siti responsive

L'utilizzo delle tecniche di responsive web design sono in continua crescita tra programmatori e designer, grazie anche alla diffusione di web framework come Bootstrap e Foundation. Il responsive web design permette di realizzare siti web in grado di adattarsi graficamente in automatico in base allo schermo del device, sia esso un PC, un tablet o uno smartphone. Ma cosa succede quando si prova ad incorporare un video player all'interno di un layout responsive?
Se si incorpora l'iframe di un video player in una pagina web responsive si nota che di default questo non viene ridimensionato con la finestra del browser. Questo si verifica perché, per impostazione predefinita, al video player viene data una larghezza e altezza fissa, impedendogli di adattarsi alle dimensioni dello schermo del dispositivo.

Vediamo di seguito qualche semplice regola CSS per ottenere un video player responsive.

Per prima cosa, si inserisce  l'iframe del video player all'interno di un contenitore <div>. Questo è il codice HTML:
  <div class="video-container"> 
<iframe id="com-wimlabs-player" name="com-wimlabs-player" src="https://www.wim.tv:443/wimtv-webapp/rest/showtime/e1d49a44-e419-4859-a114-82dc62957e59/embedded?width=692&height=440" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" frameborder="0" width="560" height="315"></iframe>
</div>
Assegniamo al <div> una classe, in questo caso chiamata .video-container. Questo è il codice CSS da applicare:
.video-container {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
}
.video-container iframe,.video-container object,.video-container embed {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
}
Nella classe .video-container la percentuale del padding-bottom definisce l'altezza, è di 56.25% per mantenere un aspect ratio di 16:9. Se il video ha un formato diverso da 16:9 è possibile scoprire la percentuale corretta con questo calcolo:  (altezza del video x 100) / larghezza. Ad esempio nel caso dei video in 4:3 la percentuale da inserire è 75%

Posizioniamo l’iframe in absolute con width e height a 100% per indurre il video a ridimensionarsi: modificando il valore di width possiamo invece decidere la larghezza del player rispetto al div contenitore.

Semplice no? Puoi vedere un esempio del risultato ottenuto con questo codice a questo link. In questo esempio abbiamo utilizzato un video pubblicato sulla piattaforma WimTV.

Nessun commento:

Posta un commento