YouTubeチャンネルの最新動画をサイト内に埋め込むコードの記述方法

YouTubeの最新動画を常にサイト内に表示させたいという時に使えるテクニック。
動画そのものを埋め込むのはYouTubeの動画埋め込みコードで簡単にできるが、常に最新動画を表示させておきたいという場合もあるだろう。
ここではYouTubeにアップロードした最新の動画を表示させるためのコードの記述方法についてお伝えする。

YouTubeチャンネル最新動画をサイトで表示させる方法

動画マーケティングで商品やサービスへの関心を高めていきたいという企業が増えている。
個人でも簡単に動画をアップできることからセルフブランディングなどの用途でも利用が盛んだ。
ここでは、YouTubeにアップロードした最新動画をサイトでリアルタイムに表示させる方法について解説する。

チャンネルIDの取得

サイト上で常に最新の動画サムネイルが表示できるようにする為に、表示させたい「チャンネルID」を利用する。
その為にはまず、

1、YouTubeに表示させたいアカウントでログインする
2、「設定」から「詳細設定」メニューに入る

すると下のような画面でユーザーIDとチャンネルIDが確認できる。

詳細設定へは、YouTubeにログインした状態で以下のURLからでも入場できる。

・https://www.youtube.com/account_advanced

チャンネルIDのUCをUUに書き換える

チャンネルIDは、「UC・・・」から始まる文字列だ。
実は、ユーザーIDとチャンネルIDは、「UC」がつくかつかないかだけの違い。
ここではチャンネルIDを利用して解説していく。
上記画像の例でのチャンネルIDは、

UCwivmUDcCe44uz3mqwEAeLw

なので、最初の「UC」を「UU」に書き換える。

UUwivmUDcCe44uz3mqwEAeLw

次に、

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

上記URLの後尾にUUに書き換えたチャンネルIDを追加する。
つまり、今回の例では、

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

となる。

リストURLを埋め込みコードに差し込む

YouTubeの通常の埋め込みコードに先ほどのリストURLを差し込む。
つまり、

<iframe width="949" height="534" src="https://www.youtube.com/embed/?list=UUwivmUDcCe44uz3mqwEAeLw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

上記のようなiframe（インラインフレーム）コードが出来上がる。これを表示させたい場所に埋め込むのだが、このままではスマホ表示で最適化されていない。
※ チャンネルIDはあなたのものを利用してください

iframeコードをレスポンシブにする

iframeコードをそのままサイト内に埋め込むと、スマホなどで見た場合に横スクロールが発生することがある。
すべてのデバイスで正常に表示されるようにコードをレスポンシブにする必要がある。
iframeコードのレスポンシブ対応は別の記事で解説しているのでそちらを参照していただきたい。
[clink url="https://www.tmseek.jp/iframe"]

実際にYouTubeチャンネルの最新動画を埋め込んでみる

なかむらの趣味チャンネルの最新動画を実際に埋め込んでみた。

上記動画は常に最新のものが表示される。

最後に・・・

YouTubeにアップロードした最新動画を自分のサイトに表示させて置きたい場合の手順について解説した。
一度設定してしまえば自動で最新の動画を表示してくれるのでいちいち入れ替えなどをする手間がかからない。
YouTube側で仕様の変更がない限り利用できるので是非チャレンジしてみてほしい。