当記事では、常にYouTubeチャンネルの最新ライブストリームを埋め込んで表示させる方法を紹介しています。
なお、 ライブ配信ではなくチャンネル内の『最新動画』を埋め込み表示させる方法はこちらの記事で解説しています。
また、この記事はhtmlの基礎知識がある、Web制作者、管理者、運用者といった方向けの記事です。 htmlの記述方法や埋め込みコードの取得方法といった部分は省略していますので、あらかじめご了承ください。
Index
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からチャンネル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チャンネルIDが分からない場合
自分以外のYouTubeチャンネルIDが分からないという場合は、IDを調査するツールを作成されている方がいましたので、そちらのツールを利用しましょう。利用は下記から。
補足と余談
なお、上記の手順で作成した埋め込みコードを設置しても、YouTubeチャンネルでライブ配信自体が無い場合は『この動画は再生できません』と表示されます。 無いんだもの……当然ですね。
『この動画は再生できません』と表示される
また、類似機能として下記のようなURLも動作します。
https://www.youtube.com/channel/UCM9FRb0LN-fIhsxhre63tfw/liveこの場合、最新のライブストリームにリンクする事はできても埋め込みには使えませんが、下記のようなボタンに使う際には重宝しそうです。参考まで。
