Cell. +39 3479684755
Il Blog di Instant Websites
Rendere reattivo un iframe con video da YouTube
L’iframe viene impiegato normalmente per inserire nella pagina HTML dei contenuti pubblicati su un altro sito.
Viene utilizzato, in particolare, nel codice di incorporazione fornito da YouTube in relazione a ciascun video, per esempio relativamente al video pubblicato all’indirizzo https://www.youtube.com/watch?v=KJGDowixXH8 avremo (clicca per ingrandire l’immagine):
Il codice HTML da inserire nella nostra pagina è dunque basato sul tag iframe e la dimensione è dichiarata in 560×315 pixel, equivalenti ad una proporzione di 16:9 (questo dettaglio risulta importante nel seguito per definire le regole CSS che lo rendano reattivo).
La scelta di un template: fattori tecnici
La diffusione dei CMS (“Content Management Systems” o sistemi di gestione dei contenuti) come WordPress, Joomla!, Drupal ecc. è stata davvero notevole negli ultimi anni per le loro caratteristiche molto apprezzate dai committenti, in particolare l’aggiornabilità dei contenuti in autonomia ed in tempo reale.
Come dice il proverbio però: “non è tutto oro quello che luccica” nel senso che questi sistemi offrono dei vantaggi indubbi ma, d’altro canto, richiedono una serie di attenzioni nello sviluppo e nella gestione del sito che non vengono sempre prese nella giusta considerazione.
L’errore più comune, sul quale peraltro non vale la pena di soffermarsi in questa sede, è quello di credere che il CMS sia una specie di “faccio tutto io”: basta cliccare un paio di pulsanti ed ecco che, per miracolo, il sito è pronto …
… in realtà, ipotizzando di avere scelto un fornitore affidabile e che la piattaforma sia stata correttamente installata, configurata e protetta dalle intrusioni, e scusate se tutto questo è poco, si giunge al momento di scegliere un template (tema grafico) per il sito.
Quali sono i principali fattori tecnici che devono guidare la scelta del template? A parte, cioè, gli aspetti estetici?
Andiamo di seguito ad evidenziarne alcuni.
What goes up, must come down ovvero: riposizionare gli elementi
Quando nell’ambito dei nostri corsi di web design devo spiegare il concetto di responsive design, sintetizzo solitamente in questo modo:
Il termine “responsive design” indica le tecniche di sviluppo delle pagine web che ne permettono l’ottimizzazione per il tipo di dispositivo sul quale un sito viene visualizzato, con particolare riferimento ai dispositivi mobili, tramite il ridimensionamento ed il riposizionamento dei contenuti
Per quanto riguarda il primo aspetto, cioè il ridimensionamento, si sono già viste in precedenti articoli le tecniche di base da applicare ai box contenitori ed ai principali contenuti (con particolare riferimento alle immagini) tramite le media query che subordinano l’applicazione di determinate regole CSS alla dimensione effettiva della viewport del dispositivo.
Relativamente al riposizionamento, invece, la pratica indica che nella maggior parte dei casi la natura di “elementi a livello di blocco” dei contenitori di pagina è sufficiente a fare sì che si dispongano uno sopra l’altro nella pagina occupando lo spazio orizzontale disponibile; tutt’al più, può essere necessario rimuovere la proprietà float per evitare che si affianchino (si rilegga questo articolo a proposito dell’uso della proprietà display: table-cell; piuttosto che della proprietà float per costruire un layout a 2 o più colonne).
In determinate circostanze, tuttavia, può essere necessario modificare questo comportamento.
Prendiamo a titolo di esempio il caso di un layout a 2 colonne, in cui la sidebar a sinistra è utilizzata per un sottomenu di pagine.
Normalmente, nel layout reattivo, questo box si posizionerebbe al di sopra di quello principale, dal momento che nel codice di pagina è inserito prima.
Ecco un semplicissimo esempio che mostra questo comportamento in un contenitore a larghezza fissa di 960px.
E’ sufficiente ridimensionare la finestra del browser per vedere come gli elementi si ridimensionano e redispongono.
Il punto è: come fare in modo che si posizioni invece al di sotto?