YouTube URIがonebox時にサムネイルをレンダリングしない

rokejulianlockhart · 2025 年 11 月 5 日午後 2:07

…透明なボックスになります：

DOMは次のように表示されます：


<img src="" width="480" height="360" title=" - YouTube" style="aspect-ratio: 480 / 360;">

しかし、投稿するとレンダリングされます：

sam · 2025 年 11 月 6 日午前 12:19

確認しました。良い指摘ですね。ひとまず「pr-welcome」を付けて、チームにトリアージを依頼するメモを残しておきます。

martin · 2025 年 11 月 6 日午前 6:37

これは興味深いですね。OPのリンクの問題は、Metaでは再現できますが、ローカル環境や社内のDiscourseサイトでは正常に取得・レンダリングされます。

@rokejulianlockhart、これらのリンクはご自身のサイトで正しくレンダリングされていないのですか、それともMetaでのみ問題が発生していますか？

rokejulianlockhart · 2025 年 11 月 6 日午後 3:44

@martin、他のいくつかのサイトでも同様です：

非Shorts

https://www.youtube.com/watch?v=Cs3sTnLO6EE&lc=Ugyi1VtrCVd2POTc82N4AaABAg#:~:text=A%20Screencast%20Of%20LinkedIn%20Persona%20Verification%20Failure というリンクの場合、以下の場所で再現されます：

しかし、discussion.fedoraproject.org では、以下のように表示されます：

^[1:2]

Shorts

\u003cdetails open\u003e

https://youtube.com/shorts/Cs3sTnLO6EE の場合、以下の通り再現されます：

…という現象が以下の場所で確認できます：

しかし、以前と同様に、discussion.fedoraproject.org では、以下のように正しく表示されます：

^[1:5]

\u003c/details\u003e

Fedoraは一体何を正しくやっているのでしょうか？

bugs.kde.org/show_bug.cgi?id=511477#c1 ↩︎ ↩︎ ↩︎ ↩︎ ↩︎ ↩︎

hameedacpa · 2025 年 11 月 7 日午前 9:45

この問題は解決しましたか？私のボードで現在発生している類似の問題についてトピックを開きました。

rokejulianlockhart · 2025 年 11 月 7 日午前 10:04

@hameedacpa、これはプレビューアに関するものであり、それとは全く関係ありません。さらに、プレビューアを利用するだけで修正されていないことを確認できます。翻訳ツールのインストールをお勧めします。

hameedacpa · 2025 年 11 月 7 日午前 11:45

私も直面している問題の一部を含むトピックを見つけました

rokejulianlockhart · 2025 年 11 月 7 日午前 11:59

@hameedacpa、それは似ていますが、同等であるとは思いません。無効なサムネイルアイコンの存在はそれを証明しているように見えます。また、<imgのアスペクト比の違いも同様です。それらの詳細を387672/1に入れると、そこで役立つでしょう。それらが単にブラウザによって引き起こされた違いである場合、これはその部分的な重複としてトリアージされます。

その点に関して、その引用されたスレッドにブラウザのバージョン、Discourseのバージョン、およびレンダリングされたコンテンツの実際のマークアップを含めてください。現在、スクリーンショット以外のものは何もありません。無給の支援を受けるには、努力する必要があります。

martin · 2025 年 11 月 10 日午前 7:20

ここにある Onebox フローで何かがうまくいっていません。リダイレクト/FinalDestination に関する問題だと思います。次のように curl を使用すると：

curl -L https://youtube.com/shorts/Cs3sTnLO6EE

レスポンスで title やその他の meta タグを見つけることができます。

curl -L https://youtube.com/shorts/Cs3sTnLO6EE | htmlq 'head > meta'
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0   0     0   0     0     0     0  --:--:-- --:--:-- --:--:--     0
100 947221   0 947221   0     0 406174     0  --:--:--  0:00:02 --:--:-- 504109
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="ApvK67ociHgr2egd6c2ZjrfPuRs8BHcvSggogIOPQNH7GJ3cVlyJ1NOq/COCdj0+zxskqHt9HgLLETc8qqD+vwsAAABteyJvcmlnaW4iOiJodHRwczovL3lvdXR1YmUuY29tOjQ0MyIsImZlYXR1cmUiOiJQcml2YWN5U2FuZGJveEFkc0FQSXMiLCJleHBpcnkiOjE2OTUxNjc5OTksImlzU3ViZG9tYWluIjp0cnVlfQ==" http-equiv="origin-trial">
<meta content="rgba(255, 255, 255, 0.98)" name="theme-color">
<meta content="A Screencast Of LinkedIn Persona Verification Failure" name="title">
<meta content="For https://www.linkedin.com/help/linkedin/cases/73171318#:~:text=Thanks%20for%20contacting%20us%20about,to%20troubleshoot%20any%20additional%20causes." name="description">
...

 curl -L https://youtube.com/shorts/Cs3sTnLO6EE | htmlq 'head > title'
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0   0     0   0     0     0     0  --:--:-- --:--:-- --:--:--     0
100 992110   0 992110   0     0 445530     0  --:--:--  0:00:02 --:--:-- 739941
<title>A Screencast Of LinkedIn Persona Verification Failure - YouTube</title>

しかし、oneboxer コード経由でレスポンスを取得すると、head に含まれるタグは（script および style タグを除く）これらだけです。

uri = FinalDestination.new("https://youtube.com/shorts/Cs3sTnLO6EE", Oneboxer.get_final_destination_options("https://youtube.com/shorts/Cs3sTnLO6EE")).resolve
doc2 = Onebox::Helpers.fetch_response(uri)
Nokogiri.HTML(doc2).css("head").children.each do |headel|
  next if headel.name == "script" || headel.name == "style"
  puts headel.to_s
end; nil;

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="origin-trial" content="ApvK67ociHgr2egd6c2ZjrfPuRs8BHcvSggogIOPQNH7GJ3cVlyJ1NOq/COCdj0+zxskqHt9HgLLETc8qqD+vwsAAABteyJvcmlnaW4iOiJodHRwczovL3lvdXR1YmUuY29tOjQ0MyIsImZlYXR1cmUiOiJQcml2YWN5U2FuZGJveEFkc0FQSXMiLCJleHBpcnkiOjE2OTUxNjc5OTksImlzU3ViZG9tYWluIjp0cnVlfQ==">
<link rel="shortcut icon" href="https://www.youtube.com/s/desktop/ace6261e/img/favicon.ico" type="image/x-icon">
<link rel="icon" href="https://www.youtube.com/s/desktop/ace6261e/img/favicon_32x32.png" sizes="32x32">
<link rel="icon" href="https://www.youtube.com/s/desktop/ace6261e/img/favicon_48x48.png" sizes="48x48">
<link rel="icon" href="https://www.youtube.com/s/desktop/ace6261e/img/favicon_96x96.png" sizes="96x96">
<link rel="icon" href="https://www.youtube.com/s/desktop/ace6261e/img/favicon_144x144.png" sizes="144x144">
<link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&amp;family=YouTube+Sans:wght@300..900&amp;display=swap" nonce="kFtYVVw9wWKkoPdOJkO9xQ">
<link rel="stylesheet" href="/s/player/65578ad1/www-player.css" nonce="kFtYVVw9wWKkoPdOJkO9xQ">
<link rel="stylesheet" href="https://www.youtube.com/s/desktop/ace6261e/cssbin/www-main-desktop-player-skeleton.css" nonce="kFtYVVw9wWKkoPdOJkO9xQ">
<link rel="stylesheet" href="https://www.youtube.com/s/desktop/ace6261e/cssbin/www-onepick.css" nonce="kFtYVVw9wWKkoPdOJkO9xQ">
<link rel="stylesheet" href="https://www.youtube.com/s/_/ytmainappweb/_/ss/k=ytmainappweb.kevlar_base.dsnGl9m3_bM.L.X.O/am=AAAgAAgk/d=0/rs=AGKMywEVyAGSU99VwQpoLFio5FrCvZ1WpA" nonce="kFtYVVw9wWKkoPdOJkO9xQ">
<meta name="theme-color" content="rgba(255, 255, 255, 0.98)">
<link rel="search" type="application/opensearchdescription+xml" href="https://www.youtube.com/opensearch?locale=en_US" title="YouTube">
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">
<link rel="canonical" href="undefined">
<link rel="alternate" media="handheld" href="https://m.youtube.com/shorts/Cs3sTnLO6EE">
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.youtube.com/shorts/Cs3sTnLO6EE">
<title> - YouTube</title>
<meta name="title" content="">
<meta name="description" content="Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.">
<meta name="keywords" content="video, sharing, camera phone, video phone, free, upload">
<link rel="alternate" href="android-app://com.google.android.youtube/http/www.youtube.com/shorts/Cs3sTnLO6EE">
<link rel="alternate" href="ios-app://544007664/vnd.youtube/www.youtube.com/shorts/Cs3sTnLO6EE">

これは ignore_redirects が原因かと思いましたが、FD オプションを変更しても効果はありませんでした。

github.com/discourse/discourse

lib/oneboxer.rb

087665ef4


      
          def self.ignore_redirects
            @ignore_redirects ||= [
              "http://www.dropbox.com",
              "http://store.steampowered.com",
              "http://vimeo.com",
              "https://www.youtube.com",

YouTube が、他のすべてのサイトと同様に AI スクレイピングの問題を抱えているため、スクレイピングを制限しているのかもしれませんが、応答が空白になる原因（ブラウザで表示した場合と同様に、JS 経由で meta/title タグが設定されているように見える）が具体的に何であるかはわかりません。

YouTube の oneboxing 用のこのコードは、title および image タグが設定されていることを期待しています。

github.com/discourse/discourse

lib/onebox/engine/youtube_onebox.rb

087665ef4


      
          def placeholder_html
            if video_id || list_id
              result = parse_embed_response
              result ||= get_opengraph.data
          
              "<img src='#{result[:image]}' width='#{WIDTH}' height='#{HEIGHT}' title='#{CGI.escapeHTML(result[:title])}'>"
            else
              to_html
            end
          end

引き続き調査します

ted · 2025 年 11 月 10 日午前 7:29

帯域幅を節約するために必要なものだけを出荷しているだけかもしれませんか？私たちのOneboxはブラウザのユーザーエージェントを使用しているので、彼らはそれを尊重しているだけかもしれません。

martin · 2025 年 11 月 11 日午前 6:49

これで修正できると思います。YouTubeのoEmbedを使用すべきです。

github.com/discourse/discourse

FIX: Use oEmbed for YouTube oneboxing

main ← issue/youtube-oneboxes

opened 06:39AM - 11 Nov 25 UTC

martin-brennan

+154 -6

We currently rely on Open Graph data to render YouTube oneboxes. However, YouTu…be does not always give us a response with the Open Graph data necessary, leading to empty preview HTML like this that shows as a broken image in the composer: ``` <img src="" width="480" height="360" title=" - YouTube" style="aspect-ratio: 480 / 360;"> ``` In addition, our old method of parsing YouTube script tags for JSON which contains information for the video, introduced in https://github.com/discourse/onebox/commit/4d669d2b710483281df1b99ff1140acdada11286, seems to no longer work reliably, possibly due to changes in YouTube's JS structure. To fix this, we switch to using YouTube's oEmbed endpoint which gives us all the metadata we need for oneboxes in JSON format, including title, author, thumbnail URL, and video dimensions. This approach is more robust and less likely to break due to changes in YouTube's page structure. c.f. https://meta.discourse.org/t/youtube-uris-fail-to-render-thumbnails-when-oneboxed/387673

そうは思いません。2つの原因があるようです。

何らかの奇妙なIPレート制限/リダイレクト。当社のホスティング上の異なるサイトでOPリンクが機能する場合としない場合があるためです。
このコードが機能しなくなったこと。期待していたJSONがそこになくなったためです。discourse/lib/onebox/engine/youtube_onebox.rb at e144ec07c8c17ad0f73427524bccc10c074d5a19 · discourse/discourse · GitHub

全体として、oEmbed URL の方が安全なようです。OPビデオの場合、https://www.youtube.com/oembed?url=https://youtube.com/shorts/Cs3sTnLO6EE&format=json となり、次のような応答が得られます。

martin · 2025 年 11 月 12 日午前 5:19

その修正がマージされたことで、現在は正常に動作しています

なお、onebox URLのレスポンスは1日間キャッシュされます。新しい結果を確認するには、コンソールで Oneboxer.preview(“https://youtube.com/shorts/Cs3sTnLO6EE”, invalidate_oneboxes: true) を実行する必要があります。

martin · 2025 年 11 月 14 日午後 10:00

このトピックは2日後に自動的に閉じられました。返信はもう受け付けられません。

トピック		返信	表示
Youtube videos onebox embedding stopped working Support	49	6361	2021 年 4 月 5 日
"Onebox Assistant", crawl for those previews reliably! Plugin onebox	96	10871	2025 年 5 月 9 日
Youtube links don't show preview anymore Support	4	1928	2024 年 11 月 8 日
Lazy video Onebox not loaded correctly for some YouTube videos Bug	14	285	2025 年 2 月 3 日
Issue with Onebox and Youtube Bug onebox	11	1219	2019 年 8 月 21 日

YouTube URIがonebox時にサムネイルをレンダリングしない

非Shorts

`discuss.kde.org/new-topic`

`forum.fairphone.com/new-topic`

Shorts

`discuss.kde.org/new-topic`

`forum.fairphone.com/new-topic`

非Shorts

Shorts

関連トピック