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

こんにちは

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

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

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

:arrow_up:

コード:

<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>

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

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

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

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


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

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>

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

何か提案はありますか?

ここでiframeを使って動画を適切にリサイズすることはできないと思います。

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

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

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

小さな動画を使用する以外の明確な解決策はないと思います(投稿時に削除されるため、<div style="position: relative; padding-top: 56.25%;">部分は含めないでください)。動画をもっと大きな形式で見たい人は、動画の右下にあるフルスクリーンアイコンをクリックします。

Contribute > Feature で、Bunny Stream動画のワンボックスサポートを作成できるか問い合わせてみることもできますが、需要が高くない限り(私はそうは思いませんが)、おそらく pr-welcome タグに属することになり、チーム自身で機能を追加するのではなく、少しのコーディング知識を持つ誰でもこの機能をコード化してDiscourseに最終的に追加できるようになるでしょう。

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

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

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

  • デフォルトの次のコードで、サイズを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しか利用できないようです。