miércoles, 5 de junio de 2013

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!!

No hay comentarios:

Publicar un comentario

Desea contactar con nosotros, deje un comentario y pronto le daremos respuesta.