Intégrer une vidéo dans la description du groupe

Soutien
1

Pour le moment, vous pouvez intégrer des vidéos provenant de YouTube et de Vimeo (et peut-être d’autres) dans les sujets.

Ce serait génial si je pouvais également intégrer des liens YouTube ou Vimeo dans les descriptions de groupes (c’est-à-dire la section « À propos » des groupes). Il semble que cette fonctionnalité ne soit pas encore intégrée : si je publie un lien vers une vidéo YouTube dans la section « À propos », le lien s’affiche simplement sans déclencher l’intégration.

Je suppose donc que je devrais modifier cela dans un thème ou un plugin. Jusqu’à présent, j’ai eu du mal à faire fonctionner cela dans un plugin. Avez-vous des suggestions ou du pseudo-code que je pourrais utiliser pour avancer ? Cela serait extrêmement utile pour mon cas d’usage.

2

Je n’ai testé cela que sur mon site local, mais je ne vois pas de raison pour laquelle cela ne fonctionnerait pas sur un site en ligne. Vous pouvez ajouter une vidéo YouTube à la description d’un groupe en utilisant le code d’intégration iframe de YouTube. Pour ce faire, copiez l’attribut src de l’iframe de l’intégration dans le paramètre du site Discourse iframes autorisés. Ensuite, copiez le code complet de l’iframe d’intégration dans le formulaire « À propos du groupe ».

Une approche similaire devrait fonctionner pour les vidéos Vimeo.

3

Bonne idée. Merci. Je vais essayer demain. J’avais essayé d’insérer directement le code iframe, mais je n’avais pas non plus ajusté les paramètres du site pour autoriser cette iframe.

4

Puisque vous avez déjà essayé d’ajouter le code iframe, après avoir ajouté sa source au paramètre « iframes autorisées », vous devrez peut-être vider le cache en apportant une petite modification à la section « Groupe À propos » et en enregistrant les changements.

5

Ça fonctionne pour YouTube ! Merci ! Savez-vous comment rendre l’intégration responsive ?

Pour info aux autres, voici ce que j’ai fait :

  1. Dans les paramètres / iframes autorisées, ajoutez https://www.youtube.com/embed/
  2. Dans la description du groupe, ajoutez directement le code iframe (vous devrez peut-être apporter une autre modification au texte et l’enregistrer pour vider le cache). Exemple de code 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>

Mais : comment rendre l’iframe responsive ? Le conseil habituel est d’encapsuler l’iframe dans une div et de lui attribuer une classe, comme “iframe-container”, puis d’ajouter du CSS tel que :

.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;
}

Je pense que ce CSS est solide, mais pour une raison quelconque, lorsque j’encapsule mon iframe dans une div dans la section “À propos” du groupe et que j’attribue une classe à cette div, la classe n’est pas enregistrée dans le texte affiché. Ainsi, lorsque j’examine l’élément, je vois simplement une div sans classe. Par conséquent, le CSS n’est pas appliqué et l’iframe n’est pas responsive. Des idées pour corriger cela ?