La inserción de video en un sitio responsivo para que el mismo se adapte automáticamente al ancho del dispositivo, puede ser complicada.
Aqui te enseño como hacerlo de forma correcta solo con CSS.
La complicación viene específicamente por que los videos, ya sean desde Youtube, Vimeo, etc. entregan un código de incrustación uilizando alguna de las siguientes etiquetas iframe, object, embed, como por ejemplo este codigo:
<iframe width="640" height="480" src="http://www.youtube.com/embed/iRoenMHx6LQ" frameborder="0" allowfullscreen> </iframe>
El iframe, al traer contenido desde un sitio externo, no se permite modificar a través de estilos CSS.
Por lo mismo es que el siguiente truco es bastante útil para que los videos sean responsivos, utilizando solo CSS.
Primero debemos contener el video, por ejemplo, en un div con id «contenedor».
Entonces en nuestro HTML colocariamos:
<div id="contenedor"> <iframe width="640" height="480" src="http://www.youtube.com/embed/iRoenMHx6LQ" frameborder="0" allowfullscreen> </iframe> </div>
Y luego los atributos CSS para ese div contenedor serian:
#contenedor {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
display:block;
}
Se utiliza el valor 56.25% para padding-bottom ya que el formato del video es wide (apaisado o alargado), pero si no fuera wide este valor deberia ser 75%.
Y por último los atributos para los iframes, objects o embed que permitirán que abarquen todo el ancho del contenedor padre:
#contenedor iframe,
#contenedor object,
#contenedor embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
De esta forma nuestro video se adaptará proporcinalemnte al tamaño del dispositivo.
Este articulo es parte de mi Curso Completo de Diseño Responsivo llamado
«Responsive Design Desde Cero«.
En este curso aprenderás desde cero, como realizar sitios web que se adapten automaticamente a todos los dispositivos móviles y tablets. Te lo recomiendo si quieres entrar en el mundo del diseño responsivo de forma seria, rápido y profesional.
Saludos!
Cristian
Gracias por el aporte y tu tiempo, muy buen consejo practico.
Por nada Fran !!
Muchas gracias tratare de aplicarlo haber que tal. : )
Hola Cristian, cómo hago eso en un vimeo que está en una entrada de blogger?
Alex, debes introducir el código directamente dentro del HTML de la entrada de Blogger, y no en el esditor visual.
Saludos!
Muchas Gracias por tu aporte !!
Muchas gracias por el aporte, fue de gran ayuda.
cristian eso funcionaria para un solo video, pero si tengo 3 como seria??
Hola. Buenas noches. Muchísimas gracias por el gran aporte. Me sirvió. No soy programador, más bien me gusta todo ésto..
De pronto me podrías colaborar con los archivos de google drive. Trato de publicarlos en el sitio y no se adaptan los archivos de excel, word… Es posible?..
Muchas gracias por contribuir con tu conocimiento
Hola Oscar
No comprende que relacion tienen Excel y Word con el articulo.
En este articulo enseño como hacer responsive los video insertados desde youtube o Vimeo.
Genial me funciono !!!
Genial! Gracias! Probé varios códigos que indicaban otras webs y solo me funcionó el tuyo. Muy útil.