概要
Youtube Live の動画とチャットをサイトやブログに埋め込みたいケースはあると思います
iframe を使って埋め込むことができるので紹介します
環境
- macOS 10.13.6
動画を埋め込む
<iframe width="560" height="315" src="https://www.youtube.com/embed/live_stream?channel=[your-channel-id]&autoplay=1" frameborder="0" allowfullscreen></iframe>チャンネル ID を取得する方法
上記の [your-channel-id] の部分にチャンネル ID を入力します
チャンネル ID はアカウントの詳細設定で確認することができます
チャットを埋め込む
<iframe width="350" height="270" frameborder="0" src="https://www.youtube.com/live_chat?v=[your-video-id]&embed_domain=hoge-fuga.com" allowfullscreen></iframe>動画 ID を取得する方法
ライブを配信を管理するページに行きここで表示されている動画を右クリックして「動画の URL をコピー」しましょう
短縮 URL https://youtu.be/[your-video-id] が取得できるのでこの後ろの部分をコピーして動画 ID として使いましょう
また embed_domain にはチャットを埋め込むサイトまたはブログの URL を入力しましょう
ローカルで確認する場合は localhost と入力してください
動作確認
こんな感じで表示されます
最後に
Youtube Live の動画とチャットをサイトに埋め込む方法を紹介しました
埋め込むこと自体は非常に簡単にできました
0 件のコメント:
コメントを投稿