En varias ocasiones me han consultado cómo insertar vídeos de YouTube en un sitio realizado con Jimdo de manera que no se muestren los famosos "vídeos relacionados" al terminar la reproducción. En un principio se podría pensar que simplemente copiado/pegando el código que te proporciona la plataforma es suficiente, pero existe un problema: el código no es "responsive".

Jimdo dispone de una excelente herramienta para la inserción de vídeos en nuestro sito: módulo vídeo. Previamente dichos vídeos han de estar alojados en alguna de las plataformas siguientes:  YouTube, Vimeo o Dailymotion (más info aquí)... Más sencillo de utilizar imposible: copias el enlace del vídeo y lo pegas en el espacio que indica "Introducir enlace al vídeo" (no te puedes equivocar; solo dispone de un campo). Y listo.

El módulo de vídeo de Jimdo es totalmente 'responsive', esto es, se adapta perfectamente al tamaño de la pantalla del dispositivo, lo cual es muy conveniente, obligatorio más bien, para la correcta visualización del contenido en smartphones y tablets.

Ahora bien, tan sencillo es que se echan en falta ciertas opciones que otorgan las citadas plataformas como son, entre otras:

• Mostrar/Ocultar vídeos sugeridos al finalizar (YouTube).
• Mostrar/Ocultar controles (YouTube).
• Mostrar/Ocultar título del vídeo, otros datos acciones (YouTube y Vimeo).
• Mostrar/Ocultar descripción del vídeo (Vimeo).
• Reproducción automática y bucle (Vimeo y Dailymotion).
• Empezar a reproducir en un minuto/segundo concreto (Dailymotion).

A los usuarios no nos suele gustar la característica de "vídeos sugeridos" de YouTube, y menos cuando (y esto es verídico) al finalizar un vídeo para un proyecto web del sector de la agricultura, YouTube te recomendaba vídeos de stripers bailando twerking  o peor aún, que al finalizar el vídeo de tu producto YouTube sugiera el de la competencia...

Sea como fuere, la opción de "ocultar vídeos relacionados" es muy útil, incluso por estética, puesto que lo ideal es que el vídeo vuelva a la portada, para poder reproducirse nuevamente si se desea, lo que se traduce en una estética de mayor calidad que respecto a la composición (caótica) de videos relacionados de YouTube... Y lo mismo si puedes ocultar los controles pues, usabilidad aparte, queda un resultado más plano y limpio.

Es cierto que un vídeo mediante módulo vídeo de Jimdo, una vez comienza la reproducción, los controles, título y demás botones se ocultan automáticamente a los poco segundos, y solo se muestran si situamos el cursor del ratón encima, por lo que, desde el punto de vista de la usabilidad, es una magnífica solución. Pero a primer "golpe de vista" a mi personalmente no me acaba de convencer; cuestión de gustos supongo:

(Vídeo insertado mediante el módulo de Jimdo dedicado)

Afortunadamente, los usuarios de Jimdo disponemos de la opción de usar el módulo widget/HTML para insertar código externo, lo que, junto a las posibilidades de inserción que ofrecen tanto YouTube, Vimeo, etc, nos permite personalizar algunas características de nuestros vídeos mediante unos sencillos pasos.

El principal problema radica en que si usamos el código tal cual se nos ofrece el resultado no es responsive y , por lo tanto, el desafío es hacer que el vídeo incrustado fuese "elástico" (anchura y altura máxima). Después de un tiempo de búsqueda y experimentación finalmente encontré un truco sobre cómo lograrlo. Para solucionar este obstáculo y no complicar demasiado el proceso he replicado la solución que el propio Jimdo usa para hacer responsive su módulo de vídeo.

Nota: Los detalles de este código se encuentran originalmente aquí ... y Jimdo los aplica de manera similar para su módulo dedicado. Por mi parte he preferido simplificarlos para la ocasión con excelentes resultados.

Voy a centrarme en YouTube por razones obvias, pero el proceso es similar en otros servicios de alojamiento de vídeos.

En primer lugar, debes acceder al código que te ofrece el servicio mediante el botoncito "compartir" situado bajo el título y sobre la descripción. Posteriormente busca la pestaña "insertar" y, en ella, el botón "mostrar más", para acceder a todas las opciones disponibles. En mi caso, que prefiero una solución lo más limpia posible, no selecciono nada. Si estas haciendo esto por evitar los vídeos sugeridos (que será lo más probable) asegúrate que la primera línea esté desmarcada:

Nota: El tamaño del vídeo no es relevante pues se auto-ajustará al tamaño de la caja contenedora, pero te aconsejo que uses el tamaño mayor disponible por si las moscas... Ya sabes: "burro grande ande o no ande".

Entonces, en el cuadro superior nos queda el código del iframe que debes utilizar, pero ya hemos quedado en que tal cual se ofrece no nos vale (no es responsive), así que vamos a añadir nuestro iframe modificado:

CÓDIGO:

Podrás observar que el iframe se ha incorporado dentro de un contenedor con un padding de relleno según el % del ratio 16:9, es decir, de un 56,25%, y además, se han añadido estilos (posición y dimensiones) a dicho iframe dado.

Por tu parte debes copiar el código tal cual te lo proporciono y sustituir la parte del iframe que no afecta a los estilos, es decir, la parte entrecomillada después del campo src= ; según el ejemplo anterior sería:

DEMO:

(Vídeo insertado mediante iframe en módulo widget/HTML de Jimdo)

Y así nos queda un vídeo incrustado 100% responsive, sin vídeos sugeridos que se muestren al finalizar la reproducción y que ocupa el ancho total del canal contenedor. Redimensiona la ventana del navegador para comprobarlo. Por cierto, si deseas limitar el ancho a un máximo puedes usar el módulo columnas para "encajar" el vídeo en un espacio limitado concreto.

Nos solo tenemos la opción del módulo vídeo de Jimdo para insertar vídeos en nuestro sitio, sino que podemos tirar del módulo widget/HTML para pegar el código proporcionado por YouTube, Vimeo, etc ajustándolo a nuestras necesidades. Espero que este pequeño tutorial te haya servido de ayuda para que tus vídeos luzcan mejor en tu proyecto web con Jimdo.