常にYouTubeチャンネルの最新動画を埋め込み表示させる方法
常にYouTubeチャンネルの最新動画を埋め込み表示させる方法

WebサイトにYouTubeチャンネルの最新動画を常に表示して埋め込む方法

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事では、常にYouTubeチャンネルの最新動画を埋め込んで表示させる方法を紹介しています。 自身/自社で運営するWebサイトで、おなじく運営するYouTubeチャンネルの紹介する際などに役立つかと。

なお、この記事はhtmlの基礎知識がある、Web制作者、管理者、運用者といった方向けの記事です。 htmlの記述方法や埋め込みコードの取得方法といった部分は省略していますので、あらかじめご了承ください。

なお、YouTubeチャンネル内の最新のライブストリームだけを常に埋め込む……という方法については、別の記事にて解説しています。

YouTubeチャンネルの最新動画を埋め込み表示させる方法

通常、動画をWebページに埋め込む場合、最低限……

<iframe src="https://www.youtube.com/embed/vPG5M85mCx0"></iframe>

……といったhtmlをWebページに記述しますが、チャンネルに新しく投稿した動画を常に表示させて埋め込みたいという場合に便利な記述方法があります。

まず掲載したいYouTubeチャンネルのチャンネルIDを取得します。

チャンネルIDを簡単に取得する方法としては、公開されているYouTubeチャンネルのトップページ(ホーム)のURLを確認し……

YouTubeチャンネル『ホーム』のURL(アドレス)を加工する
最新動画を埋め込みたいYouTubeチャンネルの
『ホーム』のURL(アドレス)を加工する

このURLの

  • https://www.youtube.com/channel/UCkvrPLEX6YBVBQgfx2ln52A

『UC』の後部分がチャンネルIDです。

※『/channel/』の後が『UC』で始まらない文字列=カスタムURLを取得しているYouTubeチャンネルの場合は、ここか、こちらでチャンネルIDを取得しましょう。

そしてこのチャンネルIDを元に下記のようなURLに書き換えれば、作業はほぼ完了。

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

あとは、このURLを読み込ませる下記のようなiframeコードを作成すればOK。

<iframe src="https://www.youtube.com/embed/?list=UUkvrPLEX6YBVBQgfx2ln52A"></iframe>

以上で、埋め込んだチャンネルの最新動画1件を自動的に表示してくれるようになります。

手動で毎回書き換える手間が省けて、YouTuberさんのブログや、コーポレートサイトでのチャンネル紹介ページなどに役立つのではないでしょうか。

YouTubeチャンネル最新動画埋め込み用URL 書き換えツール

URLを書き換えるのが手間……という方向けに、チャンネルURLを埋め込み用のアドレスに書き換えるツールを用意しました。 0.1秒でも手間を減らしたいという方はこちらを利用ください。

※このツールは、カスタムURLを設定しているYouTubeチャンネルには対応していないのであらかじめご了承ください。 繰り返しになりますが、『/channel/』の後が『UC』で始まらない文字列=カスタムURLを取得しているYouTubeチャンネルの場合は、ここか、こちらでチャンネルIDを取得してからご利用ください。

 

『チャンネルの最新動画埋込用URL』に表示されたアドレスを利用してiframeコードを書き替えてWebサイトの任意の箇所に記述すれば作業は完了です。

とっても親切な記事ですよね!(自賛)

実際にuzurea.netのYouTubeチャンネルの最新動画を埋め込んだ例

常にYouTubeチャンネルの最新動画を埋め込み表示させる方法

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

UZUREA.NET 編集部アカウント。 webデザイン会社altstackのメンバー、及び契約ライターによる匿名寄稿を含みます。


page top