YouTubeプレイリストをサイドバーに埋め込む方法
サイドバー付きのYouTube再生リストをHTMLページに埋め込もうとしています。
プレイリスト自体は、このHTMLコードによって埋め込むことができます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLMC9KNkIncKtPzgY-5rmhvj7fax8fdxoj" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1"/>
プレイリストが表示されますが、サイドバーはありません。そこで、YouTubeプレイリストの表示の横にサイドバーを追加したいと思います。
したがって、最終的なビューは次のようになります。
サイドバーのアイテムは、次の動画のサムネイル画像である必要があります。表示されていない再生リスト内の次/前の動画にスクロール/移動できるはずです。サイドバーアイテムをクリックすると、表示されたビデオがクリックされたビデオに更新され、サイドバーが次に利用可能なビデオに更新されます。
YouTubeプレイリストでは、サイドバーは次のように表示されます。
そのため、画像のサムネイルのみを含むサイドバーの変更を希望します。だから、YouTubeサイドバーの「よりすっきりした」外観。
注：ソリューションはhtml/css/javascriptのみを使用する必要があります。
これらの2つの質問は同じことを尋ねています：
サイドバーリストが表示されたYouTube Playlistプラグインを埋め込む
サイドリストトレイ付きのYouTubeプレイリストを埋め込む
しかし、これらはずっと前からのものであり、iframeとプラグインの両方のソリューションはもう機能していないようです。
編集：
回答の例のキーは古くなっているように見えるため、 here は、受け入れられた回答に基づく機能的な例です。 （もちろん@Skyrockerの全クレジット）
YouTube Data API YouTubeプレイリストをサイドバーに埋め込むことができますが、そのためには多くのことを行う必要があります。そのAPIにアクセスするには、Googleデベロッパーアカウントを作成する必要があります。次に、プロジェクトを作成してAPIを作成し、必要に応じて変更します。そして、すべての変更を行ったら、YouTubeのAPIサービスを有効にします。これで準備は完了です。