Ver todos
  • Escrito por Alan Gerardo Márquez
  • Rol en Mixen: Desarrollo Front End

Consejos y Trucos CSS que deberías saber: Parte 2

2. Videos incrustados con responsividad.

¿Alguna vez quisiste hacer video responsivo sin tenerle que dar un tamaño especifico en cada viewport?

Con la etiqueta de video nativa de HTML esto se puede hacer fácil usando -max-width:100%- y -height:auto-, pero cuando quieres hacerlo con un código incrustado usando iframe y se dificulta un poco más. Pero descuida, es más fácil de lo que piensas.

El truco es bastante sencillo, lo único que tienes que hacer es meter el código embed en un contenedor y especificarle un -padding-bottom- para así conseguir una proporción de 16:9 (dividimos 9 / 16 = 56.25%). Para luego dejar en -position:absolute- los elementos dentro de este contenedor.

See the Pen Trucos CSS 2 by GerardoMarquezMixen (@gerardomarquezmixen) on CodePen.

De esta manera podremos tener nuestro video responsivo sobre la marcha.

Recuerda estar atento a las entradas del Blog :)