YouTubeチャンネルの『最新LIVEストリーム』をWebサイトに常時表示する埋め込みコード

当記事では、常にYouTubeチャンネルの最新ライブストリームを埋め込んで表示させる方法を紹介しています。

なお、 ライブ配信ではなくチャンネル内の『最新動画』を埋め込み表示させる方法はこちらの記事で解説しています。

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

YouTubeチャンネルの最新ライブストリームを埋め込み表示させる方法

通常、YouTubeの動画やライブストリームをWebページに埋め込む場合、最低限……

<iframe width="560" height="315" src="https://www.youtube.com/embed/vPG5M85mCx0"></iframe>

といったhtmlをWebページに記述しますが、このままだとライブ配信を一時停止して新しく立ち上げた場合＝配信アドレスが変更になると埋め込んだコードも更新しなければなりません。

そこで、このソースURLを変更する事で

• 指定YouTubeチャンネルの
• 最新の
• ライブ配信

のみを常に表示させるようにするのが当記事の目的です。

まず、ライブストリームを埋め込みたいYouTubeチャンネルのチャンネルIDを取得します。

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

このURLの『/channel/UC』から後がチャンネルIDとなります。

https://www.youtube.com/channel/UCM9FRb0LN-fIhsxhre63tfw

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

このチャンネルIDを元に、下記のようなURLを作成します。

https://www.youtube.com/embed/live_stream?channel=UCM9FRb0LN-fIhsxhre63tfw

そして、このURLでiframeの埋め込みコードを記述すればOKです。

<iframe src="https://www.youtube.com/embed/live_stream?channel=UCM9FRb0LN-fIhsxhre63tfw"></iframe>

以上で、YouTubeチャンネルで配信されている最新の『ライブ動画（ライブストリーム）』だけを埋め込み表示させる事ができます。

YouTubeチャンネル最新のライブ配信を表示するコード 埋め込み例

YouTubeチャンネル最新ライブ配信埋め込み用 URL書き換えツール

URLを書き換えるのが手間……という方向けに、チャンネルURLを最新ライブストリーム埋め込み用のアドレスに書き換えるツールを用意しました。0.05秒でも手間を減らしたいという方は利用してください。

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

YouTubeチャンネルURLを入力： 　 チャンネルの最新ライブ埋込用URL：

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

超絶に親切な記事ですよね！（自著自賛）

YouTubeチャンネルIDが分からない場合

自分以外のYouTubeチャンネルIDが分からないという場合は、IDを調査するツールを作成されている方がいましたので、そちらのツールを利用しましょう。利用は下記から。

• 他人のYouTubeのチャンネルIDを調べる – ilr(アイ・エル・アール)

補足と余談

なお、上記の手順で作成した埋め込みコードを設置しても、YouTubeチャンネルでライブ配信自体が無い場合は『この動画は再生できません』と表示されます。無いんだもの……当然ですね。

また、類似機能として下記のようなURLも動作します。

https://www.youtube.com/channel/UCM9FRb0LN-fIhsxhre63tfw/live

この場合、最新のライブストリームにリンクする事はできても埋め込みには使えませんが、下記のようなボタンに使う際には重宝しそうです。参考まで。