# グループの説明に動画を埋め込む

**URL:** <https://meta.discourse.org/t/embed-video-in-group-description/165011>\
**Category:** Product Support\
**Created:** [2020 年 9 月 22 日午後 11:01 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011 "2020-09-22T23:01:11Z")\
**Posts on this page:** 1\
**Showing post:** 5

<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:** [2020 年 9 月 23 日午後 1:44 UTC](https://meta.discourse.org/t/embed-video-in-group-description/165011/5 "2020-09-23T13:44:14Z")

</div>

YouTubeで動作しました！ありがとうございます！埋め込みをレスポンシブにする方法をご存知ですか？

参考までに、私が行った手順は以下の通りです：

1. 設定 / 許可された iframe に `https://www.youtube.com/embed/` を追加
2. グループの「About」説明欄に 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 は問題ないと思うのですが、グループの About セクションで iframe を div で囲み、その div にクラスを指定しても、表示されたテキストにクラスが保存されません。そのため、インスペクタで見ると、クラスのない div として表示されます。その結果、CSS が適用されず、iframe がレスポンシブになりません。解決策をご存知でしょうか？

---

_[View the full topic](https://meta.discourse.org/t/embed-video-in-group-description/165011)._