WebサイトにYouTubeチャンネルの最新LIVEストリームだけ常に表示して埋め込む方法
WebサイトにYouTubeチャンネルの最新LIVEストリームだけ常に表示して埋め込む方法

WebサイトにYouTubeチャンネルの最新LIVEストリームだけ常に表示して埋め込む方法

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事では、常に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を確認し……

ライブストリームを埋め込みたい
YouTubeチャンネルのURLを取得
例『シナぷしゅ公式チャンネル』
ライブストリームを埋め込みたい
YouTubeチャンネルのURLからチャンネルIDを取得
例『シナぷしゅ公式チャンネル

この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を取得してからご利用ください。

 

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

超絶に親切な記事ですよね!(自著自賛)

補足と余談

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

、YouTubeチャンネルでライブ配信自体が無い場合は
『この動画は再生できません』と表示される

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

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

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

WebサイトにYouTubeチャンネルの最新LIVEストリームだけ常に表示して埋め込む方法

この記事をシェアする

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

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

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

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


page top