[Sergio Iglesias](https://sergioiglesias.net) · Blog sobre Joomla

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

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)   06 Febrero 2019    [Tips Joomla](https://sergioiglesias.net/blog/joomla)   2 - 4 minutos    Visitas: 18646  -
- [ Formación Joomla ](https://sergioiglesias.net/etiquetas/formacion-joomla)
- [ Extensiones Joomla ](https://sergioiglesias.net/etiquetas/extensiones-joomla)

   ![](https://sergioiglesias.net/images/blog/tips/embeber-videos-joomla.webp) 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

  [  Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/como-embeber-videos-youtube-vimeo-articulo-joomla?akengage_cid=408 "Compártelo")   [  Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-embeber-videos-youtube-vimeo-articulo-joomla%3Fakengage_cid%3D408&text=C%C3%B3mo%20embeber%20v%C3%ADdeos%20de%20Youtube%20y%20Vimeo%20en%20un%20art%C3%ADculo%20%23Joomla%20-%20%23MejorConJoomla "Postéalo")   [  Envíalo ](https://api.whatsapp.com/send?text=C%C3%B3mo%20embeber%20v%C3%ADdeos%20de%20Youtube%20y%20Vimeo%20en%20un%20art%C3%ADculo%20%23Joomla%20-%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-embeber-videos-youtube-vimeo-articulo-joomla%3Fakengage_cid%3D408 "Enví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".

![Embeber vídeo de Youtube - Compartir](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/embeber-videos/youtube-compartir_1230.png?version=b3051ce2ddc6f88625bfb7758e2abad4)

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.

![Embeber vídeo de Youtube - Código HTML (iframe)](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/embeber-videos/youtube-codigo_1230.png?version=76009ac364a3e6d3608dd479fd20cfe3)

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%).

 **Recomendación**: Si usas una plantilla basada en Bootstrap 3, te recomiendo que uses el siguiente código para embeber los vídeos:

Con esto garantizas que se vea bien en cualquier versión (escritorio, mobile, tablet...).

### 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.

![Embeber vídeo de Vimeo - Código HTML (iframe)](https://sergioiglesias.net/media/cached-resp-images//images/blog/tips/embeber-videos/vimeo-codigo_1230.png?version=cffeb7298b6564acdee432770131c356)

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](https://getbootstrap.com/docs/4.6/utilities/embed/)

### 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](https://getbootstrap.com/docs/5.0/helpers/ratio/)

## 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**](https://extensions.joomla.org/extension/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**](https://extensions.joomla.org/extensions/extension/social-web/social-media/osvimeo/): hace lo mismo que su "hermano" pero para vídeos de Vimeo.
- [**OsEmbed**](https://extensions.joomla.org/extensions/extension/social-web/social-media/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**](https://extensions.joomla.org/extension/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

  [  Compártelo ](https://www.linkedin.com/sharing/share-offsite/?url=https://sergioiglesias.net/blog/joomla/como-embeber-videos-youtube-vimeo-articulo-joomla?akengage_cid=408 "Compártelo")   [  Postéalo ](https://twitter.com/intent/tweet?url=https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-embeber-videos-youtube-vimeo-articulo-joomla%3Fakengage_cid%3D408&text=Extensiones%20para%20embeber%20v%C3%ADdeos%20de%20Youtube%20y%20Vimeo%20en%20un%20art%C3%ADculo%20%23Joomla%20-%20%23MejorConJoomla "Postéalo")   [  Envíalo ](https://api.whatsapp.com/send?text=Extensiones%20para%20embeber%20v%C3%ADdeos%20de%20Youtube%20y%20Vimeo%20en%20un%20art%C3%ADculo%20%23Joomla%20-%20%23MejorConJoomla%20-%20https%3A%2F%2Fsergioiglesias.net%2Fblog%2Fjoomla%2Fcomo-embeber-videos-youtube-vimeo-articulo-joomla%3Fakengage_cid%3D408 "Enví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.

[ Añadir a fuentes preferidas ](https://www.google.com/preferences/source?q=sergioiglesias.net)Gratuito · Primer paso recomendado

### ¿No sabes bien en qué estado

está tu web Joomla?

Antes de decidir si hay que arreglar, migrar o mantener, conviene saber qué está pasando. Reviso el estado de tu web — versión de Joomla, extensiones y lo que se pueda ver — y te digo qué conviene hacer y en qué orden.

Versión de Joomla y ruta de actualización Estado de extensiones Plan de acción con recomendaciones Informe por email + HTML

[ Solicitar revisión gratuita sin compromiso ](https://sergioiglesias.net/revision-joomla-gratis)Respuesta en 24–48 h laborables

[![Sergio Iglesias](https://sergioiglesias.net/images/sergiois-joomla-web.png)](https://sergioiglesias.net/sobre-mi)##### Consultor Web Joomla Senior

Soy [Sergio Iglesias](https://sergioiglesias.net/sobre-mi). Ayudo a empresas, instituciones y profesionales a convertir su web en una herramienta real de negocio: segura, escalable y fácil de gestionar. Soy especialista en migraciones complejas de Joomla sin pérdida de datos, desarrollo de extensiones y plantillas a medida y ofrezco mantenimiento y evolución de tu CMS.

[](https://x.com/sergiois "Sergio Iglesias en X") [](https://www.linkedin.com/in/sergiois "Sergio Iglesias en Linkedin") [](https://github.com/sergiois "Sergio Iglesias en Github") [](https://sergiois.github.io/ "Extensiones Joomla de Sergio Iglesias")

### Suscríbete a mi newsletter

¿Te ha gustado el artículo? Suscríbete a mi newsletter y recibe contenido exclusivo.
Podrás hacer gratis un **Curso de desarrollo de plantillas Joomla**.

[Quiero apuntarme!](https://sergioiglesias.net/newsletter)

###  2 comentarios

- [ ![](https://www.gravatar.com/avatar/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f?s=48&r=G&d=mp) ](https://www.gravatar.com/b66fba1a78a3ea7b41e98a8e43ec390a0f33e7df0759e8a53879ec6be4be9d0f)

     sergiois

     [ Miércoles, 10 Febrero 2021 18:26 ](https://sergioiglesias.net/blog/joomla/como-embeber-videos-youtube-vimeo-articulo-joomla?akengage_cid=409#akengage-comment-409)

      Hola Jose,&lt;br /&gt;Pues en la RAE sí que existe: https://dle.rae.es/embeber&lt;br /&gt;Pero realmente es un término que usa en programación que hace referencia a insertar un contenido dentro de otro. En este caso, un vídeo de Youtube o Vimeo dentro de tu código HTML (el que forma tu artículo).&lt;br /&gt;Un saludo,
- [ ![](https://www.gravatar.com/avatar/866b2879ea01b7c15e4d900601b671442034a4f22213f91679fd81fc3bdb5419?s=48&r=G&d=mp) ](https://www.gravatar.com/866b2879ea01b7c15e4d900601b671442034a4f22213f91679fd81fc3bdb5419)

     Jose

     [ Miércoles, 10 Febrero 2021 17:53 ](https://sergioiglesias.net/blog/joomla/como-embeber-videos-youtube-vimeo-articulo-joomla?akengage_cid=408#akengage-comment-408)

      Perdona; ¿Qué significa embeber? He buscado en la RAE pero no lo encuentro...

###  Deja tu comentario

 En respuesta a Some User

 Nombre \*

 Dirección de email \*

 Texto del comentario \*

 Doy mi consentimiento para que mi información personal sea recopilada y procesada por este sitio para aceptar y mostrar mi comentario, así como para notificarme sobre las respuestas a él según la [Declaración de privacidad](https://sergioiglesias.net/politica-privacidad) del sitio. \*