YouTubeチャンネルの最新動画の埋め込みコード

YouTubeチャンネルの最新動画埋め込みのコード

YouTubeの動画を自分のサイトに埋め込むのは簡単です。

埋め込みたいYouTubeの動画ページにいって、動画を右クリック、「<>埋め込みコードをコピー」を選択し、それをCtrl+Cで張り付けるだけ。

たとえば、『YOASOBI「群青」Official Music Video』の動画を埋め込みたいのであれば、該当ページ(https://www.youtube.com/watch?v=Y4nEEZwckuU)に行って、上記の手法でコードをコピーして、自分のサイト内に張り付ければOK。

 

 

上のように動画が埋め込まれました。

カンタンですね。

 

 

 

これの応用として。

意外に多くある需要が、その動画チャンネルの最新動画を埋め込みたいというもの。

 

特定のチャンネルの最新の動画を自動で取得できれば、サイトの閲覧者には常に最新の情報(動画)を提供することができます。しかも最新の動画を自動で選んで表示するわけですので、新しい動画が公開されるたびにコードを貼り替えるような手間もなくなって、大変利便性が高まります。

ただし、これをやるにはちょっとだけコードに工夫が必要でして。通常の右クリックからのコピーでは実現することはできません。

でもやり方を知っていればこれ以上なく簡単なので、以下ご紹介しておきますねー。

 

1.チャンネルのIDを取得する

例として、YOASOBIの公式チャンネルにアップされている動画の中から最新のものを埋め込む、ということを想定してみましょう。YOASOBIの公式チャンネルのURLは、

https://www.youtube.com/channel/UCvpredjG93ifbCP1Y77JyFA

となっています。

 

このURLに「UC」という文字がありますが、これより後ろの「vpredjG93ifbCP1Y77JyFA」という部分がこのチャンネルのIDになります。

まずはこの部分をコピペしましょう。

 

2.URLを完成させる

https://www.youtube.com/embed/?list=UU

上記のURLの末尾に、1のチャンネルIDをくっつけてください。

 

さきほどの「vpredjG93ifbCP1Y77JyFA」を例にすれば、

https://www.youtube.com/embed/?list=UUvpredjG93ifbCP1Y77JyFA

とすればOK。これがチャンネル埋め込みのためのURLです。

 

3.埋め込みコードの中にそのURLを組み込む

動画の埋め込みタグは通常こういうコードになりますが、

<iframe width="950" height="534" src="https://www.youtube.com/embed/Y4nEEZwckuU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

この中のsrc="https://www.youtube.com/embed/Y4nEEZwckuU"ってなってる部分を、2で作ったURLに差し替えます。

 

つまり、

<iframe width="950" height="534" src="https://www.youtube.com/embed/?list=UUvpredjG93ifbCP1Y77JyFA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

という感じ。

 

これをサイト内に埋め込めばOK。

埋め込んだ結果が以下。

 

 

これで、YOASOBIチャンネル内の一番最近にアップロードされた動画がこのように表示されるようになります。

(2023年3月23日時点では『海のまにまに』が表示されていますが、今後チャンネル内に最新PVなどがアップされればそれが表示されるようになるはずです。)

 

 

以上、特定のYouTubeチャンネルの最新動画の埋め込み方法でした。

何かと使い道もあると思うので覚えておいて損はないですよー。

ではまた!