web-dev-qa-db-ja.com

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プレイリストの表示の横にサイドバーを追加したいと思います。

したがって、最終的なビューは次のようになります。

example yt sidebar

サイドバーのアイテムは、次の動画のサムネイル画像である必要があります。表示されていない再生リスト内の次/前の動画にスクロール/移動できるはずです。サイドバーアイテムをクリックすると、表示されたビデオがクリックされたビデオに更新され、サイドバーが次に利用可能なビデオに更新されます。

YouTubeプレイリストでは、サイドバーは次のように表示されます。

screen youtube with sidebar

そのため、画像のサムネイルのみを含むサイドバーの変更を希望します。だから、YouTubeサイドバーの「よりすっきりした」外観。

:ソリューションはhtml/css/javascriptのみを使用する必要があります。

これらの2つの質問は同じことを尋ねています:

サイドバーリストが表示されたYouTube Playlistプラグインを埋め込む

サイドリストトレイ付きのYouTubeプレイリストを埋め込む

しかし、これらはずっと前からのものであり、iframeとプラグインの両方のソリューションはもう機能していないようです。

編集:

回答の例のキーは古くなっているように見えるため、 here は、受け入れられた回答に基づく機能的な例です。 (もちろん@Skyrockerの全クレジット)

4
Daan Seuntjens

YouTube Data API YouTubeプレイリストをサイドバーに埋め込むことができますが、そのためには多くのことを行う必要があります。そのAPIにアクセスするには、Googleデベロッパーアカウントを作成する必要があります。次に、プロジェクトを作成してAPIを作成し、必要に応じて変更します。そして、すべての変更を行ったら、YouTubeのAPIサービスを有効にします。これで準備は完了です。

0
Kundan