Come rendere responsive l’iframe di un video su una pagina web

Iframe video responsiveL’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.

Ti è piaciuto l'articolo? Condividilo sui social!
Email this to someoneShare on Google+Share on LinkedInShare on FacebookTweet about this on Twitter

12 thoughts on “Come rendere responsive l’iframe di un video su una pagina web”

  1. luigi says:

    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

    1. Stefano De Carlo says:

      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

  2. Alessandro says:

    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.

  3. fabio says:

    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

    1. fabio says:

      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

      1. Stefano De Carlo says:

        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

        1. fabio says:

          grazie Stefano, gentilissimo
          proverò e nel caso non riesca, posso chiedere ancora?
          Fabio

          1. fabio says:

            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

  4. Angelo Cairo says:

    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.

  5. Angelo Cairo says:

    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à

    1. Stefano De Carlo says:

      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

  6. Angelo Cairo says:

    Quindi dovrebbe essere la società di affiliazione a modificare l’iframe per renderlo compatibile nelle pagine amp?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *