Come rendere reattivo o regolabile, tutta la larghezza, un video incorporato da Youtube

Se mai inserito un video di YouTube in alcuni dei vostri siti Web Avrete notato che il video è un Larghezza fissa e questo non è reattivo Quando si modifica il dimensioni il browser o quando vedete le pagine Web da altri dispositivi con schermi di dimensioni diverse (Mobile, compresse,…).

In un precedente articolo abbiamo visto come si potrebbe inserire un video di Youtube direttamente nella tua pagina web, e se si utilizza WordPress, senza qualsiasi tipo di plugin.

Per farlo il Larghezza di un video inserito, dal codice HTML che Youtube ci da, è reattivo, la prima cosa che faremo è inserire questo codice all'interno di un DIV.

<div class="contenedor">
   <iframe src="https://www.youtube.com/embed/NUsoVlDFqZg" 
           frameborder="0" 
           allowfullscreen="allowfullscreen" 
           class="video">
   </iframe>
</div>

frameborder="0"

allowfullscreen="allowfullscreen"

class="video">

</iframe>

</div>

È possibile utilizzare il codice illustrato di seguito, e sostituire il Itinerario lungo il percorso che ti danno YouTube il video che si desidera Inserire. Siete pregati di notare che è necessario assegnare la classe video all'elemento IFRAME.

Quindi, nel file CSS corrispondente, o direttamente su un elemento STILE sulla stessa pagina, Ci accingiamo a assegnare attributi di stile per la classe contenitore e video.

.contenedor {
   position: relative;
   height: 0px;
   width: 100%;   
   padding-bottom: 56.25%;
}

.video {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
}

.contenedor {

position: relative;

height: 0px;

width: 100%;

padding-bottom: 56.25%;

}

.video {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

}

Una volta che questo codice è stato inserito, Se Aggiornamento nuovamente la pagina in cui è stato inserito il video, Verifica Ora questo è consente di regolare per la Larghezza della DIV Esso contiene. Sì est DIV si trova direttamente sopra il CORPO, si vedrà che esso reimpostazione per la larghezza dello schermo.