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

サポート
1

現在、トピックに YouTube や Vimeo（その他も可能）の動画を埋め込むことができます。

グループの説明（つまり、グループの「About」セクション）にも YouTube や Vimeo のリンクを埋め込めるようになったら素晴らしいと思います。現状ではこの機能は標準では実装されていないようです。About セクションに YouTube 動画のリンクを投稿しても、リンクがそのまま表示されるだけで、埋め込み処理は行われません。

そのため、テーマやプラグインでこの機能を追加する必要があると推測しています。これまでにプラグインで動作するようにしようとして苦労しています。進めるための提案や疑似コードはありますか？私のユースケースにとって非常に役立つはずです。

2

これはローカルサイトのみでテストしましたが、ライブサイトでも問題なく動作するはずです。YouTube の iframe 埋め込みコードを使って、グループの説明に YouTube 動画を追加できます。そのためには、埋め込みコードの iframe src を Discourse の「許可された iframe」サイト設定に追加してください。その後、完全な埋め込み iframe コードを「グループについて」フォームに貼り付けてください。

同様の方法で Vimeo 動画も埋め込むことができます。

3

いいアイデアですね。ありがとうございます。明日試してみます。以前は iframe のコードを直接貼り付けようとしましたが、その iframe を許可するようにサイトの設定を変更していなかったのです。

4

すでに iframe コードの追加を試みられた後、その src を「許可された iframe」設定に追加したら、About グループセクションに小さな編集を加えて変更を保存し、キャッシュを無効化する必要がある場合があります。

5

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 がレスポンシブになりません。解決策をご存知でしょうか？