Bunny Streamの動画を埋め込めない

[alexmas]

こんにちは

フォーラムにbunny.net Streamの動画を埋め込もうとしていますが、うまくいきません。

直リンクでは画像プレビューしか表示されません。

404 Video Not Found

iframeの埋め込みコードでは何も表示されません。

コード:

<div style="position: relative; padding-top: 56.25%;">
<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>
</div>

[Falco]

allowed iframes のサイト設定に https://iframe.mediadelivery.net/embed/ を追加してから投稿しましたか？

[Canapin (Coin-coin le Canapin)]

これは、Discourse ではまだ Onebox としてサポートされていないだけだと思います。

ただし、iframe は（小さいながらも）動作します。

allowed iframes 設定に https://iframe.mediadelivery.net/embed/ を追加することを忘れないでください

---

くそー、文字通り 1 秒遅かった

[alexmas]

Falco と Coin-coin さん、ありがとうございます！

この投稿は解決済みとしてマークしますが、最後の質問です。

Bunny は「非レスポンシブ」のコードとして以下を提案しました：

<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

しかし、サイズが合いません：

そして、「レスポンシブ」のコードとして以下を提案しました：

<div style="position: relative; padding-top: 56.25%;"><iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" style="border: none; position: absolute; top: 0; height: 100%; width: 100%;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe></div>

そして、サイズが小さすぎます

何か提案はありますか？

[Canapin (Coin-coin le Canapin)]

iframe では動画のサイズを適切に変更できないと思います。

<iframe> タグからスタイル属性が削除されるため、ここでサイズを設定しても、独自のテーマに CSS を追加しない限り効果はありません。しかし、魔法のようにうまくいくわけではありません。

iframe の幅を投稿コンテナの 100% に設定すると、次のように表示されます。

動画のアスペクト比に依存する自動の高さを設定することはできません。

簡単な解決策は、小さな動画を使用することだと思います（投稿時に削除されるため、<div> スタイル=“位置: 相対的; パディングトップ: 56.25%;”>` 部分を追加しないでください）。動画をより大きな形式で見たい人は、動画の右下にある全画面表示アイコンをクリックします。

Feature に投稿して、Bunny ストリーム動画の onebox サポートが追加されるかどうかを尋ねることもできます。ただし、需要が高い場合（疑わしいですが）は、#pr_welcome タグに属する可能性が高く、チームが機能を追加するわけではありませんが、コーディングの知識がある人は誰でもこの機能を作成して、最終的に Discourse に追加することができます。

[alexmas]

Coin-coinさん、ありがとうございます。

ついに、Bunny iframeコードのこの設定を使用します。

• レスポンシブコードの選択を解除
  

• デフォルトの次のコードで、サイズをwidth=“99%” height="300"に置き換えます。

<iframe src="https://iframe.mediadelivery.net/embed/3639/01bea422-9687-4058-9fcc-2b21dee6df2a?autoplay=false&preload=false" loading="lazy" width="1280" height="720" style="border: none;" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>

デスクトップでは高さが少し小さすぎ、スマートフォンでは少し高すぎますが、幅は問題ありません。

Oneboxがあれば素晴らしいのですが、現在ディスコースではYouTube、Vimeo、TikTokしか利用できないようです。