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

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

UZUREA編集部 アイコン

UZUREA編集部

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

当記事では、常に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チャンネルIDが分からない場合

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

補足と余談

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

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

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

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

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

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

この記事をシェアする

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

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

この記事の執筆は……

UZUREA編集部 アイコン

UZUREA編集部

UZUREA.NET 編集部アカウント。運営会社スタッフ及び契約ライターによる匿名寄稿を含みます。

関連する記事

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『早川書房』の対象作品一覧

2023年Amazonプライムデー 最大70%OFFKindle本キャンペーン『早川書房』の対象作品一覧

対象『ライトノベル』一覧 2023年6月Kindleポイント還元キャンペーン

対象『ライトノベル』一覧 2023年6月Kindleポイント還元キャンペーン

2023年5月 Kindle本マンガ・ライトノベルセール『ビーグリー』作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『ビーグリー』作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ノベル』対象作品一覧

2023年5月 Kindle本マンガ・ライトノベルセール『KADOKAWA ノベル』対象作品一覧

Amazon Kindle本ゴールデンウイークセール開催 2023年5月12日(金)まで 対象マンガ作品一覧も掲載

Amazon Kindle本ゴールデンウイークセール開催 2023年5月12日(金)まで 対象マンガ作品一覧も掲載

DMM TVで配信中の『ドラマ シリーズ』作品一覧 リンク付き番組表(2024年3月6日更新)

DMM TVで配信中の『ドラマ シリーズ』作品一覧 リンク付き番組表(2024年3月6日更新)

DMM TVで配信中の『グラビア』カテゴリ作品一覧 リンク付き番組表(2024年3月06日更新)

DMM TVで配信中の『グラビア』カテゴリ作品一覧 リンク付き番組表(2024年3月06日更新)

dアニメストア 配信中全作品 5,736タイトル リンク付き一覧(2023年6月20日更新)

dアニメストア 配信中全作品 5,736タイトル リンク付き一覧(2023年6月20日更新)

DMM TVで配信中の『バラエティ』作品一覧 リンク付きまとめ(2024年3月6日更新)

DMM TVで配信中の『バラエティ』作品一覧 リンク付きまとめ(2024年3月6日更新)

DMM TVで配信中の見放題『邦画(国内映画)』一覧 リンク付きまとめ(2024年3月06日更新)

DMM TVで配信中の見放題『邦画(国内映画)』一覧 リンク付きまとめ(2024年3月06日更新)

DMM TVで配信中の見放題『洋画(海外映画)』一覧 リンク付きまとめ(2024年3月6日更新)

DMM TVで配信中の見放題『洋画(海外映画)』一覧 リンク付きまとめ(2024年3月6日更新)

DMM TVで配信中 プレミアム会員向け見放題アニメ 全4,643件一覧(2024年4月2日更新)

DMM TVで配信中 プレミアム会員向け見放題アニメ 全4,643件一覧(2024年4月2日更新)


page top