Incrustar video en la descripción del grupo

Soporte
1

Ahora mismo, puedes incrustar videos de YouTube y Vimeo (y quizás de otras plataformas) en los temas.

Sería genial si también pudiera incrustar enlaces de YouTube o Vimeo en las descripciones de los grupos (es decir, en la sección “Acerca de” de los grupos). Parece que esto no está implementado por defecto actualmente: si publico un enlace a un video de YouTube en la sección “Acerca de”, solo se muestra el enlace, no se realiza la acción de incrustación.

Así que asumo que tendría que cambiar esto en un tema o un plugin. Hasta ahora he tenido dificultades para que funcione en un plugin. ¿Tienes sugerencias o pseudocódigo que pueda usar para avanzar? Sería extremadamente útil para mi caso de uso.

2

Solo lo he probado en mi sitio local, pero no veo por qué no debería funcionar en un sitio en vivo. Puedes agregar un video de YouTube a la descripción de un grupo con el código de inserción de iframe de YouTube. Para ello, copia el src del iframe de la inserción a la configuración del sitio iframes permitidos de Discourse. Luego, copia el código completo del iframe de inserción al formulario “Acerca del grupo” del grupo.

Un enfoque similar debería funcionar para videos de Vimeo.

3

Buena idea. Gracias. Lo probaré mañana. Había intentado insertar el código del iframe directamente, pero no había ajustado también la configuración del sitio para permitir ese iframe.

4

Dado que ya has intentado agregar el código del iframe, después de añadir su src a la configuración de ‘iframes permitidos’, es posible que necesites invalidar la caché realizando un pequeño cambio en la sección del Grupo Acerca de y guardando los cambios.

5

¡Eso funciona para YouTube! ¡Gracias! ¿Sabes cómo hacer que el incrustado sea responsivo?

Para información de otros, esto es lo que hice:

  1. En configuración / iframes permitidos, añade https://www.youtube.com/embed/
  2. En la descripción del grupo, añade el código del iframe directamente (es posible que también tengas que hacer otro cambio en el texto y guardarlo por razones de limpieza de caché). Ejemplo de código de iframe:
    <iframe width="560" height="315" src="https://www.youtube.com/embed/CTsB-llTzyc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Pero: ¿Cómo hacer que el iframe sea responsivo? El consejo normal es envolver el iframe en un div y darle una clase, como “iframe-container”, y añadir CSS así:

.iframe-container {
   overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.iframe-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Creo que este CSS es sólido, pero por alguna razón, cuando envuelvo mi iframe en un div en la sección de descripción del grupo y le doy a ese div una clase, la clase no se guarda en el texto mostrado. Por lo tanto, al inspeccionar, solo se muestra un div sin clase. En consecuencia, el CSS no se aplica y el iframe no es responsivo. ¿Alguna idea sobre cómo corregirlo?