# 그룹 설명에 동영상 삽입

**URL:** <https://meta.discourse.org/t/embed-video-in-group-description/165011>\
**Category:** Support\
**Created:** [9월 22, 2020, 11:01오후 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011 "2020-09-22T23:01:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)\
**Post date:** [9월 22, 2020, 11:01오후 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011/1 "2020-09-22T23:01:11Z")

</div>

현재 주제(topic)에 YouTube와 Vimeo(그리고 아마도 다른 서비스)의 영상을 임베드할 수 있습니다.

그룹 설명(예: 그룹의 “소개” 섹션)에도 YouTube 또는 Vimeo 링크를 임베드할 수 있다면 정말 좋겠습니다. 현재는 이 기능이 내장되어 있지 않은 것 같습니다. 소개 섹션에 YouTube 영상 링크를 게시하면 링크가 그대로 표시될 뿐, 임베드 동작이 일어나지 않습니다.

따라서 테마나 플러그인에서 이 부분을 수정해야 할 것 같습니다. 지금까지 플러그인으로 구현하려 시도했지만 어려움을 겪고 있습니다. 앞으로 진행할 수 있도록 제안이나 의사코드(pseudo-code)를 주실 수 있을까요? 제 사용 사례에 매우 도움이 될 것입니다.

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [9월 23, 2020, 1:52오전 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011/2 "2020-09-23T01:52:45Z")

</div>

> [@JQ331](#):
>
> 그룹 설명에 YouTube나 Vimeo 링크도 삽입할 수 있다면 정말 좋겠네요.

저는 로컬 사이트에서만 테스트해 보았지만, 라이브 사이트에서 작동하지 않을 이유는 없는 것 같습니다. YouTube iframe 임베드 코드를 사용하여 그룹 설명에 YouTube 영상을 추가할 수 있습니다. 이렇게 하려면, 임베드 iframe의 `src`를 Discourse의 `allowed iframes` 사이트 설정에 복사한 다음, 전체 임베드 iframe 코드를 그룹의 ‘About Group’ 양식에 복사해 넣으시면 됩니다.

비슷한 방식으로 Vimeo 영상도 작동할 것입니다.

---

<div class="post-metadata">

**Author:** ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)\
**Post date:** [9월 23, 2020, 2:04오전 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011/3 "2020-09-23T02:04:42Z")

</div>

좋은 아이디어네요. 감사합니다. 내일 시도해 볼게요. iframe 코드를 직접 넣기는 했었는데, 사이트 설정에서 해당 iframe을 허용하도록 함께 조정하지는 않았거든요.

---

<div class="post-metadata">

**Author:** ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)\
**Post date:** [9월 23, 2020, 2:08오전 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011/4 "2020-09-23T02:08:20Z")

</div>

이미 iframe 코드를 추가해 보셨다면, 해당 iframe의 src를 `허용된 iframe` 설정에 추가한 후, About Group 섹션에 작은 수정을 가하고 변경 사항을 저장하여 캐시를 무효화해야 할 수 있습니다.

---

<div class="post-metadata">

**Author:** ![JQ331](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@JQ331](https://meta.discourse.org/u/JQ331)\
**Post date:** [9월 23, 2020, 1:44오후 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011/5 "2020-09-23T13:44:14Z")

</div>

유튜브에서는 잘 작동하네요! 감사합니다! 임베드를 반응형으로 만드는 방법을 아시나요?

다른 분들을 위해 제가 한 방법을 공유합니다:

1. 설정 / 허용된 iframe에 `https://www.youtube.com/embed/`를 추가합니다.
2. 그룹 소개 설명란에 iframe 코드를 직접 추가합니다 (캐시 초기화 목적을 위해 텍스트를 한 번 더 수정하고 저장해야 할 수도 있습니다). 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>`

* * *

하지만: iframe을 반응형으로 만드는 방법은 어떻게 될까요? 일반적인 조언은 iframe을 div로 감싸고 "iframe-container"와 같은 클래스를 부여한 다음, 다음과 같은 CSS를 추가하는 것입니다:

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

```

이 CSS는 견고하다고 생각하는데, 어떤 이유에서인지 그룹 소개 섹션에서 iframe을 div로 감싸고 해당 div에 클래스를 부여해도 표시되는 텍스트에 클래스가 저장되지 않습니다. 그래서 인스펙터를 보면 클래스 없이 그냥 div만 표시됩니다. 따라서 CSS가 적용되지 않고 iframe이 반응형이 되지 않습니다. 어떻게 수정해야 할지 아이디어가 있으신가요?