insertar videos

Aprende a insertar vídeos de modo responsive en tu blog

Muchos de vosotros ya conocéis mi faceta docente en cursos de Teleformacion ligados al marketing digital y al Community management. Os quiero traer hoy una duda que surge en muchos de los cursos: cómo insertar vídeos. En los módulos de gestión de contenidos o creación de blogs, el vídeo es importante y debemos cuidar ciertos detalles.

Me refiero a la posibilidad de insertar, encastrar o embeber vídeos de youtube para enriquecer vuestro contenido. Esto en ocasiones, o no lo sabemos hacer, o lo hacemos incorrectamente. Este post está pensado para que los vídeos siempre os queden bien optimizados.

Os comento desde el principio: el código HTML es el lenguaje de programación con el que están hechas todas las páginas web.  (si en el menú del navegador acedéis a más información y herramientas para desarrolladores podríais verlo)

Hoy en día se pueden crear las páginas web sin saber este lenguaje, pues hay muchos programas que son editores visuales y que ‘traducen’ las instrucciones de HTML para que no tengamos que escribir el código para crear o modificar nuestro blog, por ejemplo.

Dicho esto, para situaros, hay ciertas cosas, que hay que hacer con trocitos de código, y aunque no haya que escribirlo a mano, sí debemos saber donde está y cómo utilizarlo. Una de estas cosas sería el motivo de este post: ’embeber’ (del inglés ’embed’) un vídeo de youtube en un blog.

INSERTAR EL VÍDEO

Vamos a coger de base un ejemplo del blog ‘hermano’ de cursos femxa y os explico cómo he insertado los vídeos.

https://www.cursosfemxa.es/blog/5-consejos-para-mejorar-como-profesor

En este artículo sobre consejos para profes, he embebido varios vídeos que hablan de cursos para profesores, para ello, me fui a un botón, que tiene el editor del blog, que me deja cambiar el código html de ese artículo y he puesto un trocito de código que me da youtube cuando voy a compartir y luego pulso en insertar.

Os dejo tres pantallazos para que lo veáis claro:

insertar vídeos

insertar vídeos

insertar vídeos

Ahora sólo tendríais que buscar el botón identificado con estos simbolos < > en vuestra web o blog para pegar ese código en la ubicación que deseéis y ’embeber’ el vídeo desde youtube.

INSERTAR EL VÍDEO DE MODO RESPONSIVE

Hasta aquí la primera parte, todo bien…. pero haciendo esto podéis tener problemas de visualización en función del dispositivo desde el que se acceda al contenido en el que insertáis el vídeo y podría pasar esto:insertar videos

El vídeo, en el modo de visualización en el móvil no se adapta, por lo que se corta, y para verlo bien, habría que girar el dispositivo.

La solución es sencilla, pero tiene su truco: cambiad el código que proporciona youtube por otro en el que incluyáis una instrucción para que el ancho sea un 100%, y así se adapte a cada pantalla. Os recomiendo también indicar un ancho máximo, para que así en la visualización en pc el vídeo no quede exagerado.

Tened en cuenta que cada CMS tiene sus particularidades a la hora de insertar el codigo html, Así, que os paso el código del vídeo adaptado para dos de ellos:

Insertar vídeos en Joomla:

<iframe style=”max-width: 600px;” src=”https://www.youtube.com/embed/9KjY8nR_bvE” width=”100%” height=”315″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe>

Insertar vídeos en wordpress:

<iframe width=”100%” max-width=”600″ height=”315″
src=”https://www.youtube.com/embed/a_VfR0_BM2o”
frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture” allowfullscreen></iframe>

Si lo hacemos correctamente, el tamaño del vídeo se adaptará automáticamente al tamaño de la pantalla, sea ordenador, móvil o tablet, con las múltiples configuraciones de pantalla que se pueden encontrar. Como el vídeo que tenéis a continuación:

 

Photo by rawpixel.com from Pexels

Deja un comentario

Tu dirección de correo electrónico no será publicada.