YouTubeのサムネイルの黒いバーを取り除く

YouTubeの埋め込みは、黒いバーが表示されていた場合にそれを削除することで、しばらく前に改善されました。

しかし、多くの動画のサムネイルでは、これらの黒いバーが残っています。これも対応可能でしょうか?

「いいね!」 3

バックバーに関する具体的な変更点は、hqdefault の代わりに maxresdefault 画像を使用したことです。ただし、すべての動画に高解像度のサムネイルがあるわけではないため、そのような場合は opengraph 画像にフォールバックします。これは hqdefault と同等です。

この画像サイズはアスペクト比が異なり、黒いバーが含まれています。しかし、どちらの場合もアスペクト比は 16:9 に固定されているため、プレイヤーを表示する際に黒いバーは表示されないはずです。

高解像度の画像がなく、サムネイルにこちらを使用している動画の例を次に示します。

これが起こっている例をいくつか共有していただけますか?

「いいね!」 3

承知いたしました。ご関心をお寄せいただきありがとうございます。

以下に、埋め込みでは見栄えが良いものの、サムネイル(およびプレビュー)で黒帯が表示される動画を2つご紹介します。

og:image は次のとおりです。

ご指摘のとおり、黒帯が表示されています。

そして

og:image は次のとおりです。

ご指摘のとおり、黒帯が表示されています…

注:「良いケース」はこちらです。

この場合の og:image ははるかに大きいです。

現在、Topic List Previews Sidecar プラグインを使用して、プラグイン固有のオーバーライドを使用してクリッピングしながらサムネイルを再生成しています。

…しかし、コアでこれを自動化する方法があれば素晴らしいです。これは半手動で何度も行う必要があり、非常に面倒です。

問題は、どの画像をトリミングできるかを特定することです。

YouTube の画像が 4:3 または特定の解像度を下回っている(黒帯が表示されているに違いない)と検出された場合に、16:9 を強制するだけでしょうか?

おそらく、optimize image に YouTube を扱っていることを伝えるフラグを渡す必要があるということでしょうか?

YouTube がサムネイルを 16:9 に標準化していないのは奇妙だと思います。何か見落としているのでしょうか…

サイズの違いについてご説明いただきありがとうございます!

今、あなたの言っていることが理解できたと思いますが、コアで画像を処理することは、埋め込み画像の使用ケースにはあまり適合しません。これらの埋め込み画像のサムネイルは保存せず、必要に応じてYouTubeから直接取得しています。

とはいえ、どの画像を切り抜くべきかを特定するのは、それほど難しくないはずです。このURLを見てみてください。

https://img.youtube.com/vi/dsVAzSG6SbM/hqdefault.jpg

maxresdefault

  • 常に16:9です。
  • 最も高解像度です。
  • 常に利用できるわけではありません。

hqdefault

  • 常に4:3です。
  • 元の動画が16:9の場合、黒いバーが追加されます。

mqdefault

  • 常に16:9です。
  • hqdefaultよりもさらに低解像度です。

少し奇妙ですが、予測可能です。4:3の形式は、互換性のためにまだ使用されているレガシーサイズだと思います。

16:9の画像を表示する場合、アスペクト比を修正するだけで済みます。他のアスペクト比が必要な場合は、フラグを渡してCSSでスケールを補正すれば問題ないと思います。

コンポーザーのプレビューは改善できるのは事実ですが、これは上記と同様のアプローチで行うことができます。

このアプローチで考えられる唯一のエッジケースは、低解像度のサムネイルを持つ縦長動画の場合です。その場合、黒いバーは表示されません。:man_shrugging:

「いいね!」 2

しかし、コアは調理済み投稿プロセスの一部として、さまざまな解像度の独自の派生サムネイルを作成・保存しているのではないでしょうか?

ここに黒いバーが保持されています。

ビンゴ!

いずれにしても、プラグインの改善に役立つ非常に役立つ情報です。本当にありがとうございます!

黒いバーがあるかどうかをGPT-4 Visionに尋ねたり、ImageMagickで検出したりするよりも、ずっと簡単です。

「いいね!」 1

あなたの洞察のおかげで、Topic List Previews を、切り替える必要のない、よりシンプルなソリューションで更新しました。これは、YouTubeのレガシーな4:3サムネイルの場合にのみトリミングされます。

これは、コア機能としても十分に汎用的で役立つかもしれません。

「いいね!」 2