Joomla! 3, junto con la incorporación del framework Twitter Bootstrap, ha dado un salto muy importante para el desarrollo web de sitios responsive y adaptables. En el presente artículo aprenderemos a desarrollar un módulo que permite la publicación de vídeos responsive en cualquier sitio web Joomla!.

La tecnología responsive, trabaja los espacios , las dimensiones de los objetos, en función de porcentajes y valores máximos, mínimos ó porcentuales.

De esta forma, en las hojas de estilo vinculadas a nuestras plantillas, podemos observar valores como;

max-width: 250px;
max-height: 125px;
min-width: 50%;
width: auto;

Estos valores permiten la adaptación de los contenidos, textos, imágenes y videos a las resoluciones de los distintos dispositivos desde lo que se está consultando el contenido, móviles , tablets o pc.

Cuando insertamos un video en nuestra web , Youtube ó Vimeo, estamos construyendo un iframe, una ventana con unas dimensiones fijas. Ello puede provocar desajustes dependiendo del dispositivo de navegación , más aún si copiamos el código embed que nos proporcionan y lo pegamos dentro de nuestros artículos ó módulos del tipo html.

Joomla! 3 y, versiones anteriores también, dispone de un componente para la construcción de iframes y por tanto , una solución óptima para la vinculación de videos youtube en nuestra web que podemos aprovechar con valores responsive. 

Módulo Wrapper

El módulo Wrapper (URL Embebida) nos permite crear en cualquier sitio de nuestra web, un iframe vinculado a una url.

Dentro de nuestro back-end, en el panel de administrador de Joomla!, nos iremos a Extensiones > Gestor de Módulos y seleccionaremos New. Entre las opciones disponibles, seleccionaremos el módulo tipo Wrapper.

Editando las opciones del módulo tenemos:

En URL escribiremos una url ajustada para la reproducción en iframes, y en valores width, y height, podremos trabajar con porcentajes, evitando valores fijos que desencajen la ventana del video en resoluciones distintas a la marcada.

Nota: Deberemos tener presente que el trabajar con % significa que las dimensiones de la ventana se verán influenciadas por la ubicación donde esta sea mostrada. Aqui nace el Responsive.

URL

Un iframe es una ventana abierta en nuestra web a otra web. De esta forma, cuando creamos un iframe para un video de Youtube, en realidad estamos insertando la web de youtube dentro de nuestra web.

La url que debemos de escribir dentro de nuestro módulo wrapper debe ser la url preparada para el embed, no la url que nos ofrece el navegador cuando estamos consultando la página del video. 

Una forma sencilla , de preparar esta url , pasa por copiar la url que nos da el navegador cuando estamos en Youtube y posteriormente sustituir en la url, el valor “ watch?v= “ por " embed ". En el caso de Vimeo incluiremos la palabra " video ".

Ejemplo Práctico

A continuación disponemos de 2 tipo de urls, que muestran un video para YouTube y otro para Vimeo y que hemos obtenido copiandolas de nuestro navegador web.

Youtube > https://www.youtube.com/watch?v=Qjnc0H8utks

Vimeo  > http://vimeo.com/32823876

Una vez ajustadas, las urls que deberemos de insertar en nuestro módulo wrapper serán; 

Para Youtube > www.youtube.com/embed/Qjnc0H8utks

Para Vimeo > http://player.vimeo.com/video/32823876

Y recuerda, si vas a mostrar el video a través de wrapper, dentro de otro módulo tipo html y estas haciendo uso de la función {loadposition} ó {loadmodule}, para mostrar el Módulo Wrapper, deberás de activar la opción, “prepare content” disponible en la configuración del Módulo tipo html. En caso contrario el módulo wrapper no se mostrará.

Ventana de opciones Módulo tipo Html que en algunas ocasiones se utiliza para insertar un módulo tipo wrapper dentro de otro módulo tipo html.