Come rendere responsive l’iframe di un video su una pagina web
L’utilizzo delle tecniche di responsive web design sono in continua crescita tra programmatori e designer, grazie anche alla diffusione di framework come Bootstrap e Foundation. Il responsive web design permette di realizzare siti web in grado di adattarsi automaticamente 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 ho utilizzato un video pubblicato sulla piattaforma WimTV.
Buongiorno! Ottimo articolo. La domanda è: il codice è valido anche per un contenuto di una pagina incorporata?
http://www.globalgap.it/ricerca-certificato-globalgap/
Grazie anticipatamente
Luigi
Buongiorno Luigi,
il codice descritto è pensato per ottimizzare l’incorporamento di un video (le proporzioni sono specifiche per questo scopo) ma può vale anche per incorporare pagine.
In questo caso è importante che anche la pagina che si sta incorporando nell’iframe sia responsive.
Un saluto
Ottimo ed applicato (per ora ho solo provato localmente, non ancora pubblicato).
L’unico problema che riscontro è per la visione su PC o, comunque, non su cellulari: il video si ridimensiona al 100% (o, comunque, alla percentuale che imposto nel CSS) incurante del fatto che l’iframe è più piccolo.
Quindi, la pagina vista su computer risulta bruttina.
Bisognerebbe impostare che oltre una certa risoluzione, le dimensioni non aumentino.
Alessandro.
ciao
se invece di un video avessi un iframe con un codice html per la visualizzazione di un elenco di nomi “pescati” da un db? come devo fare? avrai già inteso che non sono una cima……
grazie
Chiedo scusa mi sono dimenticato di specificare che tutto il sito è responsive, ma i dati che vado a prendere da un codice html iframe non lo sono
Ciao Fabio,
puoi sostituire il video con l’iframe di una pagina html, è importante però che anche la pagina html inclusa nell’iframe sia responsive, altrimenti questa non potrà scalare insieme al div contenitore.
Un saluto
grazie Stefano, gentilissimo
proverò e nel caso non riesca, posso chiedere ancora?
Fabio
ok, già fatto (senza esito)
la pagina html inclusa nell’ iframe NON è responsive…si deve lavorare su quella
grazie lo stesso e comunque mi hai chiarito.
Fabio
Salve, complimenti per il post molto utile, avrei una domanda. Devo inserire un codice iframe relativo ad un box di ricerca crociere su una pagina amp, google non mi convalida la pagina con questa dicitura:
“Il tag “iframe” può comparire solo come discendente del tag “noscript”. Forse intendevi “amp-iframe”?”
Come posso inserire il seguente codice, anche se ho provato a seguire le linee guida di googlema non appare più il box di ricerca sulla pagina… ecco il codice:
iframe src=”http://back.crocierelines.it/iframe_search_engine.aspx?aid=1807&skin=1&color=white&VOfferte=false&VLastminute=true&IDDestinazione=&IDCompagnia=&Title=&categoria_itinerario_id=1″ frameborder=”0″ width=”163″ height=”340″ scrolling=”no”></iframe
Grazie per la disponibilità, cordiali saluti.
Salve, complimenti per il post molto utile, volevo chiedere se era possibile adattare il metodo anche con un iframe relativo ad un “box di ricerca crociere”…
Grazie per la disponibilità
E’ possibile, in riferimento al post precedente il problema forse è causato dal fatto che il box di ricerca si trova all’interno di un’area privata, non pubblica.
Saluti
Quindi dovrebbe essere la società di affiliazione a modificare l’iframe per renderlo compatibile nelle pagine amp?