Embed video in Group description

support
1

Right now, you can embed videos from youtube and vimeo (and maybe others) in topics.

It would be awesome if I could also embed youtube or vimeo links in group descriptions (ie, the “About” section of groups). It looks like this is not baked in right now–if I post a link to a youtube video in the about section, it just displays the link, it does not do the embedding action.

So I’m assuming I would need to change this in a theme or plugin. I’ve struggled to make it work in a plugin so far. Do you have suggestions or pseudo-code I could use to move forward? It would be extremely helpful for my use case.

2

I’ve only tested this on my local site, but I can’t see why it wouldn’t work on a live site. You can add a Youtube video to a group’s description with the Youtube iframe embed code. To do that, copy the embed’s iframe src to your Discourse allowed iframes site setting. Then copy the full embed iframe code to the group’s About Group form.

A similar approach should work for Vimeo videos.

2 Likes
3

Cool idea. Thanks. I’ll try tomorrow. I had tried putting in the iframe code directly, but I had not also adjusted the settings of the site to allow for that iframe.

4

SInce you’ve already tried adding the iframe code, after you add its src to the allowed iframes setting, you may need to break the cache by adding a small edit to the About Group section and saving the changes.

5

That’s working for youtube! Thanks! Do you know how to make the embed responsive?

For others’ info, this is what I did:

  1. in settings / allowed iframes, add https://www.youtube.com/embed/
  2. In the group about description, add the iframe code directly (you may have to also make another change to the text and save it for clear cache reasons). Example iframe code:
    <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>

But: How to make the iframe responsive? The normal advice is to wrap the iframe in a div, and give it a class, like “iframe-container”, and add css like this:

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

I think this css is solid, but for some reason, when I wrap my iframe in a div in the group about section, and give that div a class, the class is not saving in the displayed text. So, when I look in the inspector, it just shows a div, without a class. Therefore, the css is not being applied, and the iframe is not responsive. Any ideas how to correct?