• Passa alla navigazione primaria
  • Passa al contenuto principale

Arch. Mattia Frigeri

Web Design Parma - Siti Internet Parma - Grafica Parma

  • Chi siamo
  • Portfolio
  • Articoli
    • Web
    • Grafica
    • WordPress
    • Libri
  • Corsi Web Design
  • Contatti

Web · Marzo 25, 2013

Responsive web design e oggetti multimediali



<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


Se stai leggendo questo articolo avrai sicuramente già visto il codice qui sopra: è il tag <meta> da inserire nel tuo sito, qualora volessi renderlo “responsive“.

E quando si progetta un sito secondo i principi del responsive web design, solitamente i primi problemi inziano con gli oggetti multimediali: img, video, iframes e oggetti incorporati (embed). Questi tendono infatti a comportarsi in maniera indipendente rispetto al loro contenitore, quasi non intendessero rispettarne le dimensioni.

Ho imparato che basta inserire questa regola nel CSS per risolvere il 99% dei problemi con video e immagini:


img, video, canvas {

    max-width: 100%;
}

Questo codice ha infatti la capacità di “forzare” la larghezza dell’oggetto su quella del suo contenitore, in modo che entrambe le dimensioni rimangano coerenti.

Iframes e Embed

Con iframes ed oggetti embed però, saltano fuori le prime “crepe”, soprattutto se questi sono importati da servizi di terze parti quali YouTube o Google Maps.

Ma la cura esiste! La soluzione migliore consiste nel posizionare in modo assoluto l’oggetto importato, e inserirlo in un contenitore personalizzato con width pari a 100%. Tale contenitore deve anche avere height pari a 0, in modo da evitare un noto bug di Internet Explorer 5 e 6.

Aggiungo infine un quantitativo di padding-bottom, calcolato in base alle proporzioni dell’oggetto che sto caricando. Se ad esempio un video è in 16:9, allora:

9/16 = 0.5625

Il che significa, nel CSS:



.iframe-container {

    padding-bottom: 56.25%; /* 16:9 */

}


Perchè padding-bottom e non padding-top? Sempre per un problema con Internet Explorer (in questo caso il 5.5, quindi un problema tutto sommato “veniale”): se uso padding-top infatti, IE 5.5 non è in grado di posizionare il contenitore in modo assoluto.

Un esempio concreto

Supponiamo di dover quindi importare un iframe (un classico video di YouTube). Decido di usare un <div> come contenitore, a cui assegno la classe iframe-container:



<div class="iframe-container">

    <iframe src="http://youtu.be/CWX34ShfcsE"></iframe>

</div>

Nel CSS:



.iframe-container {

    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
}

iframe { 

    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0; 
    top: 0;
}

Prova a variare la dimensione della finestra del browser per vedere come il video si “ri-adatta”.

E con WordPress?

Niente di complicato: nel caso volessi caricare un video all’interno di un post di WordPress, basta anche qui inserire il contenitore attorno all’oggetto embed. Sempre su un mio recente articolo puoi leggere un tutorial su come caricare correttamente un video in WordPress.

Approfondimenti

  • Alistapart
  • Anders Andersen (blog)

Archiviato in:Web Contrassegnato con: canvas, embed, iframe, immagini, responsive web design, video

Post precedente: « Photoshop: creare gruppi di guide calamitate (custom guides)
Post successivo: Eliminare il link che WordPress inserisce di default sulle immagini caricate »

  • © 2008-2022 Studio Arch. Mattia Frigeri
  • Via Giuseppe Romita 4, 43123 Parma (PR)
  • Tel. 339/7547430 - Email: arch.mattiafrigeri@gmail.com
  • P.I. 02542140344
  • Privacy Policy - Cookie Policy - Aggiorna preferenze Consenso