3 novembre 2015 Video adattivi automatici (RWD)

Vuoi dei plugin ? Beh, procurati dei plugin ...
Questo è molto semplice ma sempre più necessario: prende un video da YouTube (o altri servizi) inserito tramite un iframe , ne calcola le dimensioni e inserisce un codice CSS personalizzato in modo che il video diventi adattivo (RWD).
A differenza del semplice (ma non meno efficace) codice CSS che usiamo per fare la stessa cosa, le proporzioni saranno esattamente quelle di cui il video ha bisogno, né più né meno.
Con i CSS, lo svantaggio è che devi aggiungere ulteriore markup HTML al video e, d'altra parte, che le proporzioni saranno le stesse per tutti i video, a meno che tu non voglia aggiungere altro manualmente.

Questo codice è scritto in JavaScript semplice, quindi non richiede jQuery o altre librerie aggiuntive. Avrebbe potuto essere più breve, ma se avessimo dovuto caricare un'intera libreria per farlo, il risparmio di poche righe non avrebbe compensato il peso aggiuntivo.
Chiunque abbia una conoscenza di base del linguaggio capirà facilmente l'algoritmo:

• Un nodo con lo stile CSS necessario viene creato e aggiunto alla fine della pagina.
• Quindi tutti gli iframe trovati al suo interno vengono catturati e, tramite un loop, vengono "circondati" da un box che includerà la stessa classe utilizzata nel CSS ( video100 )
• Allo stesso tempo, verrà calcolato il rapporto tra altezza e larghezza che l'iframe include come parametri e verrà applicato il padding-bottom necessario tramite CSS in linea per rispettare tale rapporto.

<script>//<![CDATA[
funzione rwdiframes() {
    var style = document.createElement("style");
    var content = document.createTextNode(".video100 {posizione: relativa; larghezza: 100%; altezza: 0; overflow: nascosto;} .video100 iframe, .video100 embed {posizione: assoluta; alto: 0; sinistra: 0; larghezza: 100%; altezza: 100%;");
    stile.appendChild(contenuto);
    document.head.appendChild(stile);
    var iframes = document.getElementsByTagName("iframe");
    var div = document.createElement("div");
    div.className = "video100";
    if (!iframes.length) iframe = [iframe];
    per (var i = iframes.length - 1; i >= 0; i--) {
      var child = (i > 0) ? div.cloneNode(true) : div;
      var effettivo = iframes[i];
      se (altezza corrente > 0 e larghezza corrente > 0) {
        child.style.paddingBottom = altezza.corrente / larghezza.corrente * 100 + "%";
        var genitore = current.parentNode;
        var sibling = current.nextSibling;
        child.appendChild(effettivo);
        se (fratello) {
          parent.insertBefore(figlio, fratello);
        } altro {
          genitore.appendChild(bambino);
        }
      }
    }
  }
addEventListener("carica", rwdiframes);
//]]></script>

Puoi inserire questo codice direttamente nel template, prima di </head> o </body> , oppure, se preferisci, come gadget HTML/JavaScript.
Se vuoi sperimentarlo, puoi trovarlo in questo Codepen . Lì puoi vedere come funziona e come rispetta le proporzioni originali di due video con dimensioni diverse.
Ah! E per chi preferisce la versione jQuery, è disponibile qui sotto:

<script>//<![CDATA[
$(documento).ready(funzione() {
  $style = "<style>.video100 {posizione: relativa; larghezza: 100%; altezza: 0; overflow: nascosto;} .video100 iframe, .video100 embed {posizione: assoluta; alto: 0; sinistra: 0; larghezza: 100%; altezza: 100%;</style>";
  $("testa").append($stile);
  $("iframe,incorpora").each(funzione() {
    $ratio = $(this).height() / $(this).width() * 100;
    $(this).wrap("<div class='video100' style='padding-bottom:" + $ratio + "%;'></div>");
  });
});
//]]></script>

Vogliamo dare un'occhiata a un altro post a caso, nel caso lo trovassi utile, o forse preferisci essere più sistematico e iscriverti ai nostri post via email ? Puoi anche stampare questo articolo e, naturalmente, condividerlo sui social media se ti è piaciuto.

fonte