Cómo embeber vídeos de Youtube y Vimeo en un artículo Joomla

Hoy te traigo un minitutorial para ver diferentes formas que tiene Joomla para embeber vídeos de Youtube y Vimeo en un artículo como este.

Cómo embeber vídeos de Youtube y Vimeo en un artículo #Joomla - #MejorConJoomla Tuitéalo

De forma manual

Para embeber un vídeo de forma manual en un artículo Joomla sin necesidad de usar ninguna extensión de terceros, simplemente con código, tenemos que hacer lo siguiente:

Vídeo de Youtube

Para embeber un vídeo de Youtube vamos a la página del vídeo correspondiente. Por ejemplo:

https://www.youtube.com/watch?v=ineee4JtKRc

Una vez aquí tienes que pulsar en el botón de "Compartir".

Esto hará que se abra una ventana o "popup" con diferentes formas de compartir el vídeo (redes sociales incluidas).

La opción que te interesa para este caso que proponemos en el artículo es la que pone "Insertar".

Esta opción volverá a abrir una ventana nueva en la que se mostrará el vídeo a la izquierda y el código HTML que necesitamos en la derecha.

Como puedes ver en la imagen tienes disponibles algunas configuraciones.

Al final lo que nos interesa será este código HTML:

<iframe src="https://www.youtube.com/embed/ineee4JtKRc" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">

Una vez que tienes este código, tendrás que poner el editor que utilices de forma que puedas introducir código HTML y pegarlo.

De esta forma, tendrás embebido el vídeo:

Dependiendo de los estilos que tengas en tu plantilla para esta etiqueta iframe se verá de una forma u otra (yo, por ejemplo, tenía una para que ocupara un ancho del 100%).

Vídeo de Vimeo

Si queremos que el vídeo sea de Vimeo los pasos a seguir son similares. Necesitaremos el código HTML que se genera para poder embeberlo.

En este caso, como puedes ver en la imagen anterior, el botón se llama "Compartir" y en la ventana que aparece tienes las diferentes formas de compartirlo. Para este caso que propongo necesitarás el código que aparece en el apartado de "Insertar".

<iframe src="https://player.vimeo.com/video/107463665?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen" allow="autoplay; fullscreen">

Códigos HTML para Bootstrap

Bootstrap 3 y 4

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="/...">
</div>

Cuentas con diferentes ratios (16:9, 4:3...) en función de lo que necesites.

Puedes verlo en Ratios embed BS4

Bootstrap 5

En esta versión de Bootstrap la forma de hacerlo ha cambiado.

Es muy similar, pero cambian las clases:

<div class="ratio ratio-16x9">
  <iframe src="/..." title="YouTube video" allowfullscreen>
</div>

Puedes ver también los ratios en esta página: Ratios embed BS5

Embeber vídeos en Joomla con extensiones

Para facilitar esta labor de embeber vídeos contamos en Joomla con varias extensiones que paso a listarte a continuación.

Mi recomendación en este sentido es que las pruebes todas y veas cuál se adapta mejor a tu proyecto y al usuario final (el que va a gestionar el contenido de la web).

Listado de extensiones

• OsYouTube: se trata de un plugin que transforma todas las direcciones de Youtube que se encuentra en el contenido en un embebido de forma automática. Es muy facilito y funciona perfectamente.
• OsVimeo: hace lo mismo que su "hermano" pero para vídeos de Vimeo.
• OsEmbed: es el hermano mayor de los plugin anteriores y, además de embeber vídeos de Youtube y Vimeo, embebe prácticamente cualquier cosa.
• AllVideos: uno de los de toda la vida. La verdad que personalmente no me gusta utilizar este tipo de Shorcodes, pero es una alternativa más.

Extensiones para embeber vídeos de Youtube y Vimeo en un artículo #Joomla - #MejorConJoomla Tuitéalo

Espero que este artículo te ayude a embeber vídeos en un artículo Joomla.

Si conoces alguna extensión más para esta funcionalidad no dudes en compartirla en los comentarios.