Insertar un video con Javascript: 100€

Comienzo una nueva sección en el blog que consistirá en ir detallando los problemas y las soluciones de casos reales que me van planteando algunos clientes. Aunque es un tema algo delicado, siempre con el permiso del cliente, procuraré ir publicando los costes de la modificación pertinente, ya que es un dato muy interesante para el desarrollador.

¿Tu podrías haber hecho la modificación que me han encargado? Si la respuesta, es que sí, tendrás un interesante ejercicio para practicar. Si la respuesta es que no, con los conocimientos de mis cursos de HTML y Javascript deberías haber podido resolver este problema.

Además del propio encargo, adjunté al cliente una pequeña videoguía en la que le explicaba como modificar mi código fuente para poder subir el mismo cualquier otro video.

Insertar un video con Javascript

La página en cuestión es un wordpress que utiliza el editor visual de contenido Visual Composer. El problema, es que cuando me puse a editar el contenido de la página de inicio, me encontré con una interfaz tan saturada de contenido como la que puedes ver a continuación.

Insertar un video con Javascript: 100€ 1

En este enlace, podrás ver la página de cookify.es tal como la tenía el cliente antes de que hiciese mi magia.

En este otro enlace, puedes ver como quedó la página tras cambiar la foto por un video.

Tuve que pulir un poco que el video para que se redimensionase lo más correctamente posible y añadir la funcionalidad de que el sonido se active al hacer click sobre el video y que el icono del video cambie al hacer click.

Si quieres afrontar el reto, estos son los recursos que utilicé (el video y las imágenes del altavoz):

La solución al reto

Como me costaba mucho tocar el visual composer para editar el contenido, añadí el video y las funcionalidades utilizando Javascript. El siguiente enlace corresponde al código que programé (es posible que tuvieses que cambiar las urls que hay en el código para adaptarlo a las urls que utilices en tu ordenador).