動画付きで再設計されたRedditトピックの埋め込み

Reddit の動画を投稿に埋め込むにはどうすればよいですか?例えば、この投稿:

Link here

には、以下のような埋め込みコードが含まれています:

<blockquote class="reddit-card" data-card-created="1588774544"><a href="https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/">I also decided to edit at 2AM</a> from <a href="http://www.reddit.com/r/VALORANT">r/VALORANT</a></blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

これでどうでしょうか?

  https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

これは以下を行います:

ああ、それはよくないですね。Reddit に移動させるのではなく、Discourse 内で動画を再生してほしいのですよね。

「いいね!」 1

ありがとうございます。
可能であれば、YouTube や Vimeo のように、そのまま再生したいですね。

ハハ、お二人はそのようにお考えですが、Reddit がどう考えているかはお考えになりましたか?

彼らが方針を全面変更し、v.redd.it を開始して以来、状況はもはや以前と同じではありません。

すべての OpenGraph および Twitter Card タグは、私たちに静的な画像を提供しています。Reddit は、埋め込みを許可しているのは静的な画像のみであると明確にしています。

さらに詳しく調べてみると、動画は DASH コンテナ形式で、音声と映像が別々のファイルになっています。これを Discourse で再生するには、少なくともカスタム JS 動画プレイヤーを使用する必要があります。

「いいね!」 1

実は Reddit はこれを許可しています:

「埋め込む」ボタンを押すと、以下のようなオプションが表示されます:

私の課題は、Discourse サイトの投稿でそれを表示させる方法です。

古いredditの共有を試してみましたが、これも画像だけでした。これが新しいredditのUIでしょうか?

はい、新しい方です。

「いいね!」 1

ああ、どうやら embed.ly へのアウトソーシングのようです。

調べてみると、投稿 ID を使えば、実際に動作する iFrame を構築できるようです。

@techAPJ が引き受けるつもりでなければ、pr-welcome としましょう。

<iframe src="https://old.reddit.com/mediaembed/gdyrsg" width="690" height="388">

[動画が自動再生される動作する iFrame]

「いいね!」 2

@Falco、動画を自動再生しない方法を考えられませんか?

編集:HTML サンタイザーの iframe 要素に強制的に allow="autoplay 'none'" を適用すれば、これ(新しいブラウザのみで)が解決するかもしれません。

また、プレーヤーのボタン(一時停止、全画面表示など)もすべて機能しません。

どなたかこの件でプルリクエストを作成しませんか?:thinking:

この例のURLでこちらの「共有」>「埋め込み」ボタンをクリックし、このコードをコピーすると:


<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419">
</iframe>

コンポーザーウィンドウで動画が埋め込まれ、再生されます:

しかし、投稿を送信すると動画が消えてしまいます。

iframe要素の末尾にallow="autoplay 'none'"を追加すると、動画が表示され、再生(一時停止、再生など)も問題なく機能するようになります:


<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419"
allow="autoplay 'none'">
</iframe>

このようになります: