YouTubeの再生リスト埋め込み

1. YouTube の iframe 埋め込みプレイヤーには、再生リストをいい感じに表示してくれる機能がある

https://gyazo.com/f2e44d6256c21fab612388ed33f21c97

2. これとは別に、YouTube 動画の隣に再生リストを表示できる機能もある (こちらは埋め込みプレイヤーではない)

https://gyazo.com/19f64b8c9b0c56311069573514a52eff

↑の URL は https://www.youtube.com/watch?v=ePiEVqBs6a0&list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC

これの短縮 URL は https://youtu.be/ePiEVqBs6a0?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC

3. これらとは別に、再生リストそのものを表す URL も存在する

https://gyazo.com/66999b91b2230024955fce8bd2c17502

↑の URL は https://www.youtube.com/playlist?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC

videoId が含まれていないので、サムネイルの URL を取得できないという問題がある

1 を Helpfeel に実装して欲しいという要望が顧客からあがる 2021/6/25

2 の URL を Scrapbox に貼ることで、Scrapbox/Helpfeel 両方で 1 のように表示されることを目指す

これは teramotodaiki.icon の認識違いで、balar.icon さんが対応してくれたのは 3 → 1 だった

teramotodaiki.icon が新たに 2 の存在に気付いた

balar.icon さんが Scrapbox に実装してくれた 2021/6/28

現在 Helpfeel に移植中 teramotodaiki.icon

移植中、再生リストにも短縮 URL が存在することに気付いたので、調査してまとめた

！？balar.icon

YouTube の仕様はこうなっています teramotodaiki.icon

普通の iframe 埋め込みプレイヤーの URL に list={playlistId} というパラメータを付与すれば 1 のようになる

code:html

/embed/videoseries というエンドポイントも存在する

code:html

/embed との違いは、list={playlistId} のパラメータが必須になることらしい

それ以外の見た目や振る舞いは /embed と変わらない

2 は、動画 URL に list={playlistId} というパラメータを付与するだけで使える

youtu.be 短縮 URL にも適用可能

1 の埋め込みプレイヤーで「共有」ボタンをクリックすると、この短縮 URL が得られる

https://gyazo.com/34f1fb9cb5722e8786fab7b975683d25

つまり一般ユーザーも短縮 URL を使う可能性が高い

videoId と playlistId がチグハグな (動画が再生リストに含まれていない) 場合の振る舞いが、 1 と 2 で異なる

1 では、結果がチグハグになる

https://youtu.be/M_74dfkyfOI?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC

https://gyazo.com/ba0dd5cb5368734a08fb40a150c84fec

右上には Nota Tech Conf という再生リストがあるものの、表示されている動画は Nota にまったく関係ない

こんな URL は自分で作り出さない限り生成されないので、問題ないのだろう

2 では、再生リストの一番最初にある動画が表示される (つまり videoId は無視される)

https://codesandbox.io/s/wild-rain-bz9h3?file=/src/App.js (この実験の一番下で試している)

例

code:html

https://www.youtube.com/embed/M_74dfkyfOI?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC

をブラウザで開くと Nota Tech Conf Day 1 の動画が再生されるが、本来の videoId は ePiEVqBs6a0 である

https://www.youtube.com/embed/M_74dfkyfOI を開くと、全く別の動画が再生される

playlistId が優先されていることがわかる

from YouTube埋め込み

再生リストを埋め込むことは可能だろうか？ teramotodaiki.icon

YouTube には動画の横に再生リストも表示される URL があるのだけど、そもそも埋め込めるのだろうか

動画と再生リストを埋め込む - YouTube ヘルプ

code:html

右上に再生リストのアイコンが出てきて、クリックすると再生リストが表示される

REPL → https://glitch.com/edit/#!/balanced-sable-avatar?path=index.html%3A1%3A0

https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG

こういう URL が埋め込めるといいのかな？

はい、リストも対応すればいけそうなのでやりますbalar.icon

YouTubeの再生リストを埋め込み可能にする

再生リストには短縮URLのyoutu.beは存在しなかった

どうやら再生リストにも短縮 URL が存在するようです /teramoto-help/プレイリストの短縮 URL のテスト teramotodaiki.icon

見逃してました！対応します！balar.icon

なるほど。動画の共有に再生リストのパラメータが存在するって感じなんですね。

です。他にも動画 URL と埋め込み URL でパラメータが共通していることがありそうなので、 youtube と youtubePlaylist は共通化してしまった方が良いかも知れません teramotodaiki.icon

共通化するPR作ってみましたbalar.icon

done.iconYouTubeの再生リストパラメータ付の動画に対応

今の実装だと youtu.be と youtu.be?list= の違いを正規表現でチェックするのが難しそう？ teramotodaiki.icon

再生リストだけの時にサムネイル画像が生成されないのがちょっと大変そうだけど頑張ってみるかbalar.icon

確かに…！teramotodaiki.icon

https://youtu.be/ePiEVqBs6a0?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC こういう URL なら videoId があるのでサムネイルも作れますね teramotodaiki.icon

はい。そっちはいける。

https://www.youtube.com/playlist?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZCをyoutubeに寄せるのがちょっと大変。

なるほど、僕が認識を勘違いしてました。2 じゃないですね (3 を追加しよう)

youtu.be?list=の対応は出来ますbalar.iconとりあえずこれをやります。

https://www.youtube.com/playlist?list=PLmoRDY8IgE2OTDG7rVwVLd-szijCAZyZC