Miércoles, 08 Marzo 2017 15:33

Bootstrap desde Mobirise: Video Responsivo

Valora este artículo
(0 votos)

Bootstrap desde Mobirise

Videos Responsivos con Bootstrap desde Mobirise

En respuesta a una consulta de clases sobre como insertar un video responsivo, y complementado una entrada anterior en la que usamos componentes de Bootstrap desde Dreamweaver, veremos ahora las oportunidades de inserción casi directa que nos ofrece Mobirise para realizar las siguientes tareas:

a. Video responsivo de fondo

Mobirise dispone de varios componentes para insertar videos responsivos; veremos en este caso como utilizar el componente "Video Background" (es posible consultar sobre los métodos de trabajo con Mobirise haciendo clic en este enlace):

El componente

Una vez publicado nuestro proyecto desde Mobirise podemos editarlo con el programa de nuestra elección para agregar, quitar y depurar el código a nuestra conveniencia.

Para la realización de esta entrada hemos generado dos páginas con este componente, al que le hemos cambiado el video de fondo; la primera de ellas con el video ocupando el 100% del ancho útil del agente de usuario; la segunda conteniendo el código correspondiente dentro de un div con clase "container", las cuales podemos ver en vivo en los siguientes enlaces:

También es posible descargar ambos códigos de ejemplo haciendo clic aquí.


b. Video embebido en un iFrame

Otra de las formas de insertar un video responsivo en Mobirise consiste en embeberlo dentro de la etiqueta iframe, utilizando el siguiente componente:

Video responsivo embebido desde Mobirise

Siguiendo los mismos procesos de edición que en el paso anterior, generamos dos modos de comportamientos diferentes para nuestro video:

Bajar los códigos de los ejemplos (comprimidos en formato .zip).

Enlace recomendado: Administrar bloques de contenidos desde Mobirise.


c. Video dentro de un slider responsivo

Usando algunos de los sliders que ofrece Mobirise, entre otros, los siguientes:

Sliders Bootstrap desde Mobirise

es posible luego seleccionar, en cada uno de los slides que configuremos, si queremos que su contenido sea una imagen o un video:

Configurando los slides

 

Editando los códigos de las páginas publicadas desde Mobirise generamos las siguientes presentaciones para el slider que contiene el video:

Bajar los códigos de los ejemplos comprimidos en formato .zip.


Nota importante: No se han buscado fines estéticos en los ejemplo, sino simplemente funcionales con la finalidad de simplificar los códigos generados.

Espero haber ayudado con esta entrada a solucionar la consulta de clase; en caso de dudas  y comentarios, los invito a utilizar el formulario presente al pie de esta página.

Saludos para todos!
Plácido Luna.

 

Visto 371 veces Modificado por última vez en Miércoles, 08 Marzo 2017 16:39