Video YouTube responsive: come fare?

Il codice HTML che fornisce YouTube per incorporare un video nel proprio sito web non si riadatta automaticamente allo schermo dal quale viene visto e questo è un grosso problema. Se stai cercando una soluzione hai trovato l’articolo giusto. Di seguito il codice HTML e poi CSS per risolvere questo problema.

Video YouTube responsive HTML

sostituisci l’indirizzo “https://www.youtube.com/embed/XXX” con quello del video che vuoi incorporare

<div class="videoWrapper"><iframe src="https://www.youtube.com/embed/XXX" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

Video YouTube responsive CSS

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Se hai un sito web, come noi, e vuoi incorporare un video del tuo canale YouTube oppure quello di qualcun’ altro per spiegare un concetto in un articolo del tuo blog sicuramente avrai riscontrato questo problema. Ci sembra assurdo che il codice “embed” di YouTube non sia responsive ma sembra proprio che, per ora, sia così perciò speriamo che questo articolo ti sia risultato utile.

Condividi

Condividi su whatsapp
Condividi su facebook
Condividi su linkedin

Indice

Fai una domanda su