Codigo Youtube Ajustable (Responsive)

Si desean incluir un vídeo dentro de una plantilla de diseño adaptable (responsive), es posible que se encuentren con el inconveniente que el vídeo conserva la medida en ancho y alto que es generada en el código de YouTube. Para resolver esto solo debemos aplicar lo siguiente:

1. Adicionamos un div contenedor de video con la clase video-contenedor

            
        
   
        Código de iframe generado en youtube
        
   

2. Aplicamos las siguientes reglas css

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

Y listo con este código tenemos un vídeo que se ajusta a nuestro diseño!!