Come rendere video YouTube responsive

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.

css, html, wordpress

Lascia un commento

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