Player video youtube responsivo

Aggiungere player per la visualizzazione di video Youtube è molto semplice: basta aggiungere il “codice da incorporare” scaricato dalle proprietà del video e inserirlo nel codice HTML del nostro sito… ma se il sito ha un layout responsivo, il player non si adatterà correttamente.

Per risolvere possiamo modificare il codice html scaricato da youtube:

<iframe src="//www.youtube.com/embed/KmObZnQfRXg?rel=0" frameborder="0" allowfullscreen height="315" width="560">>

con questo:

<div class="resp-video">
<iframe src="//www.youtube.com/embed/KmObZnQfRXg?rel=0" frameborder="0" allowfullscreen>
</div>

ed aggiungere il seguente codice css:

.resp-video {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
.resp-video iframe,
.resp-video object,
.resp-video embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}