Bestiary # bloques texto + video
Find me in /app/views/bestiaries/bloques_texto_video.html.erb
Índice
Dentro de los diferentes contenedores del back (organizados en cajas -> filas -> Elementos), también podemos meter elementos del vídeo.
El funcionamiento / configuración de los elementos de vídeo es similar a los elementos de imagen con la excepción de que al meter un vídeo SIEMPRE hay que seleccionar una relación de aspecto (es decir la proporción de ancho:alto del vídeo).
Las proporciones disponibles para el vídeo son: ratio-4:3, ratio-16:9 (panorámico), ratio-2:1.
Un ejemplo medianamente complejo de lo que se puede llegar a hacer
“Ejemplo con color de fondo (#2D3339), dos columnas (.cols-2) y vídeo en formato 4:3
. You can design, arrange behaviour for a whole range of things: fun, challenge, purpose, meaning. It’s about engagement, purpose and stickability.”
Gareth Mills, Futurelab. garethmillsonline.com
Ejemplos de disposiciones de cajas
Ejemplo de fila con 2 columnas (.cols-2). La de la izquierda con un párrafo de texto y la de la derecha con un elemento de vídeo.
Se han ajustado los paddings de los diferentes elementos para conseguir un efecto diferente.
Igual que el anterior con los elementos cambiados de columna.
Lorem ipsum dolor siciatis excepturi officiis! Minima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus, tempora dolore ut magni maxime necessitatibus.
Una fila, con una sola columna, con un único elemento de vídeo de proporción 16:9.
Dos columnas 33% / 66% (cols-33-66).
Elemento de texto + vídeo con proporción 2:1.
Lorinima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus, tempora dolore ut magni maxime necessitatibus.
Casi igual que el anterior, jugando con los paddings de las coumnas.
En este caso además se emplea el modificador que permite que una fila tenga una fina línea gris en la parte supeior o inferior (.top-bottom-line-thin-grey).
Fila de 3 columnas con un gutter ancho (cols-3 with-gutter-wide), dentro de cada columna colocamos un elemento de 'Elemento de vídeo genérico'.
Los elementos de 'Vídeo genérico' disponen de una caja de texto opciona, que por defecto se mostrará siempre debajo del vídeo.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, unde, adipisci, aliquam minus enim tempore illo qui placeat recusandae maiores dolor perspiciatis excepturi officiis! Minima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque.