YouTubeライブでチャットを配信画面に表示させる方法

ヤミツキテレビの朗読担当の月子です。

さて、YouTubeライブを配信する時に、チャットにコメントの書き込みがあるとうれしいですね

7月に初めてヤミツキラヂヲを生配信した時にもたくさんのコメントをいただき、びっくりしたとともに、うれしかったです。
しかし!!YouTubeライブのチャット画面の表示は生放送中のみで、配信が終わってしまったら読むことができません(T_T)

せっかく、みなさまがコメントくださったのに・・・

ということで、7月の配信後に配信画面にチャット欄を表示させて、アーカイブ画面に残せないか?と調べて、設定することに成功しました!!!

8月のヤミツキラヂヲでは、チャット欄を表示できたので、アーカイブで見ることが出来ます。
そこで、今日は配信ソフトOBSでの設定の仕方を書いてみたいと思います。

まずはOBSの設定の仕方はこちらのブログで御覧ください⇒ YouTubeライブの配信の仕方

YouTubeライブの管理画面でチャットをポップアウトする

YouTubeの管理画面からライブの場所を開きます。

右端のチャットの・・・(表示は縦)の部分をクリックすると「チャットをポップアウト」が表示されます。

ここをクリックすると、別画面で「チャット」がポップアウトされます。
このURLをコピーしてください。

OBSのソースにBrouwserSourceを追加

OBSを起動させて、チャットを表示させたい画面のソースにBrouwserSourceを追加します。

BrouwserSourceを設定してクリックすると設定画面が表示されます。
一番上のURLの部分に先程コピーしたYouTubeライブのチャットURLを貼り付けます。

これを貼ると、配信画面にYouTubeライブのチャット画面が表示されます。

サイズの変更

画面に合わせて、チャット画面のサイズを変更します。

上の枠が横幅、下の枠が縦幅になります。
ちなみに、ヤミツキラヂヲのチャット画面のサイズは横が300、縦が500に設定しています。

チャットの背景を透過させる

チャット画面を透過させるためにBrouwserSourceのCSSを使います。

私はCSSが書けないのでこのサイトを参考にしました。

Chat v2.0 Style Generator」(チャットのCSSジェネレーター)
(CSSが書ける方は好きな設定にしてみてください)
このサイトの下の方のCSSのコードをコピーして、OBSの「BrouwserSource」にある「CSS」に貼り付けてください。

これで、OBSの配信画面にYouTubeのチャット画面が表示されます。

簡単に説明しましたが、おわかりいただけたでしょうか?
参考になれば幸いです(*´艸`*)

さて、9月2日の22時頃から、「ヤミツキラヂヲ」生配信しまーす!!
またみなさまからのコメントお待ちしております。

ではでは、月子でした♪

スポンサーリンク