Vídeo de Youtube responsive

Introducir en una landing page o en una página web un video de Youtube es sencillo:

El código HTML necesario es el siguiente:

<div class="delimitador">
   <div class="video_cont">
      <!-- Para cambiar el video que se mostrará solo tenéis que sustituir esta parte del código z9vUCXGoC6w 
           por la que aparece en la URL del video que queráis de Youtube.
           Ejemplo: Es esta URL -> https://www.youtube.com/watch?v=A3PDXmYoF5U
           Debéis copiar este fragmento -> A3PDXmYoF5U
      -->
      <iframe src="https://www.youtube.com/embed/z9vUCXGoC6w" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
   </div><!-- video_cont -->
</div><!-- delimitador -->

El código CSS:

.delimitador {
   width: 100%;
}

.video_cont {
   height: 0px;
   width: 100%;
   padding-top: 56.25%; /* Relación: 16/9 = 56.25% */
   position: relative;
}

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

¿Hablamos?

ir arriba