Embed video in Group description

Product Support

AI-generated summary

Users are discussing embedding videos in group descriptions on a Discourse forum. JQ331 wants to embed YouTube or Vimeo links in group “About” sections, but currently, only links are displayed. simon suggested adding the YouTube iframe embed code to the group’s description after allowing the iframe source in the site settings.

JQ331 successfully implemented this for YouTube videos by adding https://www.youtube.com/embed/ to the allowed iframes setting and using the iframe code directly in the group description. However, they are struggling to make the iframe responsive. They tried wrapping the iframe in a div with a class and adding CSS, but the class is not being saved in the displayed text.

simon mentioned that breaking the cache by making a small edit to the About Group section and saving changes might be necessary after adjusting the site settings.

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.

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?