Moodle insertar video adaptado responsive

MOODLE – Insertar vídeo responsive

Qué hacer cuando quieres insertar vídeos responsive en Moodle.

Como mucho de ustedes ya saben Moodle es un sistema de código abierto que permite gestionar cursos online, desde la administración de alumnos y profesores, hasta la creación del propio contenido virtual.

Dado que está más enfocado en la creación de contenidos dentro de la propia plataforma no es tan sencillo incrustar contenido de otros servicios como es el caso de vídeo de Youtube o Vimeo.

Incrustar Vídeos

Cuando queremos incluir contenido mutimedia en nuestro centro de formación virtual tenemos dos posibilidades, la primera es alojar en nuestro propio servidor las fotos, vídeos y audio. Y la otra es, como hemos comentado anteriormente, alojarlos en un servicio externo.

Cuando los vídeos son alojados internamente, Moodle dispone de distintos repoductores (Flash, HTML5, Javascript, etc) que podemos configurar indicando cual se debe utilizar y cual preferentemente.

El problema de este tipo de inserción, es que se inserta con el tamaño por defecto configurado en Moodle y, si visitamos nuestro centro virtual desde un dispotivo móvil o con el explorador sin maximizar, el vídeo se verá cortado.

Moodle-Screenshot-Responsive-Video

HTML + CSS

Para resolver este tema debemos realizar los siguientes pasos.

Primero debemos añadir un nuevo estilo a nuestros archivos CSS insertándolo en la cabecera <HEADER></HEADER> de nuestro sistema. Nuestro nuevo estilo deberá ir entre las etiquetas <STYLE></STYLE>

Para hacer esto vamos ir a la configración de Moodle en Administrador del Sitio -> Apariencia -> HMTL Adicional e insertamos nuestro código HTML+CSS en el apartado «Dentro del Encabezado»

Moodle insertar video CSS Responsive

Y finalmente cuando queramos añadir nuestro vídeo al contenido del curso en vez de añadir sólo un enlace del tipo:

Debemos ir a nuestro campo de descripción y pulsando en estos iconos indicados, añadirmos nuestro enlace al vídeo como iframe.

Incrustamos nuestro vídeo con el siguiente código. Con un tamaño por defecto pero en el que primerá la adaptación al contenido.

A partir de ahora nuestro vídeo se verá con un tamaño adaptado sea cual sea el tamaño de nuestro explorador.

Moodle insertar video adaptado responsive

 

Tengan en cuenta que si utilizan las tecnologías de seguridad/privacidad de videos como la limitación a poder reproducirse sólo en determinados dominios, no es posible reproducir los vídeos a través de la aplicaciones oficial de Moodle y la única forma de acceder a los vídeos es a través del explorador móvil.

Espero que este pequeño tutorial les sea de utilidad como lo ha sido para mi dar con esta solución.

El contenido de este post no es original mío en su totalidad, la propuesta CSS es sólo una traducción de la entrada que encontré en inglés en el foro de la comunidad Moodle.
Puedes pinchar en el siguiente enlace para ver el contenido original.

https://moodle.org/mod/forum/discuss.php?d=258650

Mi aportación principal a sido indicar, en español, los pasos a seguir para configurar dicha solución CSS y poder aplicarla en los contenidos formativos.

Un saludo a tod@s.

 

Dejar un comentario