この記事は下記の悩みや疑問を持つ人にオススメです。
- OBSでブラウザが映らない原因は？
- OBSのブラウザソースが映らない！
- コメント欄が全然表示されない…
はじめまして。ブログ運営と動画投稿をしているちゃすくです。
この記事ではOBSでブラウザ（ブラウザソース）が映らない＆表示されない原因と対処法を解説します。
もしどうしてもOBSへブラウザが映らない場合は、代わりにBandicam
を使う方法もオススメです。
OBSでブラウザが映らない原因と対処法
OBSでブラウザが映らない原因には下記があるので、それぞれの項目で詳細と対処法を解説します。
- 「ブラウザソース」は存在しない
- ハードウェアアクセラレーションが有効
- セキュリティソフトがOBSを妨害
- ファイル名に全角スペースが含まれる
- カスタムCSSの設定ミス
- OBSのアップデートによる不具合
原因1：「ブラウザソース」は存在しない
よくある誤解なのですが、古い記事では「ブラウザソース」や「BrowserSource」と表記してあるので、それらを必死に探している人がいます。
しかし、最新のOBSでは下画像のように「ブラウザソース」や「BrowserSource」の機能が「ブラウザ」へ改名されてます。
そのため、YouTubeのコメント欄を表示したい時などは「ソース」にある「+」から「ブラウザ」を追加してください。
原因2：ハードウェアアクセラレーションが有効
OBSでブラウザソースが映らない場合、「設定」＞「詳細設定」＞「ソース」にある「ブラウザソースのハードウェアアクセラレーションを有効にする」が原因として考えられます。
ハードウェアアクセラレーションを有効にすると、CPUの処理をGPUへ任せられるのでOBSの描画パフォーマンスが向上しやすいです。
しかし、スペックがあまり高くないPCでハードウェアアクセラレーションを有効にすると、メモリを大量に使うのでブラウザソースが映らない原因になります。
もしブラウザソースが映らない場合は「ブラウザソースのハードウェアアクセラレーションを有効にする」のチェックを外すか、高スペックPCを買ってください。
ちゃすく
チェックを外した後は再起動推奨
OBSにオススメのPCは下の「OBSの推奨スペックは？」を参考にしてください。
原因3：セキュリティソフトがOBSを妨害
OBSのソースからブラウザを初期設定のまま追加すると下画像が表示されるはずですが、表示されない場合はセキリティソフトの妨害が原因だと考えられます。
対処する際はセキュリティソフトの検知機能でOBSを除外設定にするか、セキュリティソフト自体をオフにしてください。
ちなみに、Windowsの場合は最初からWindowsDefenderが搭載されているので、セキュリティソフトをアンインストールしても大丈夫です。
詳しい内容は下の「PCに有料ウイルス対策ソフトが要らない理由３選」にまとめてあるので参考にしてください。
原因4：ファイル名に全角スペースが含まれる
OBSのソースでブラウザを追加する際、「ローカルファイル」で全角スペースが含まれたファイル名だと何も表示されません。
具体的には下記の通りであり、ローカルファイルを映したい場合はファイル名を変更するしかありません。
- 「ちゃすくのファイル.html」：映る
- 「ちゃすく ファイル.html」：映らない
原因5：カスタムCSSの設定ミス
OBSのソースでブラウザを追加する際、「カスタムCSS」というブラウザのデザインや文字サイズを調整できる項目があります。
カスタムCSSの設定ミスがあると想定通りの画面が映らなかったり、表示がおかしくなることもあります。
カスタムCSSに何か書いてあった場合は一旦削除し、表示を確認してください。
ちゃすく
YouTube LIVEのコメント欄向けカスタムCSSも貼っておきます↓
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;700&family=Noto+Sans+SC:wght@500;700&family=Noto+Sans+TC:wght@500;700&family=Noto+Sans+KR:wght@500;700&family=Noto+Sans:wght@500;700&display=swap");
/* Background colors - 背景色 */
body {
overflow: hidden;
background-color: rgba(0,0,0,0);
}
/* Transparent background - 背景透過 */
yt-live-chat-renderer {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer,
yt-live-chat-text-message-renderer[is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer[author-type="owner"],
yt-live-chat-text-message-renderer[author-type="owner"][is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer[author-type="moderator"],
yt-live-chat-text-message-renderer[author-type="moderator"][is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-text-message-renderer[author-type="member"],
yt-live-chat-text-message-renderer[author-type="member"][is-highlighted] {
background-color: transparent !important;
}
yt-live-chat-author-chip #author-name {
background-color: transparent !important;
}
/* Outlines - 縁取り */
yt-live-chat-text-message-renderer * {
text-shadow: -2px -2px #000000,-2px -1px #000000,-2px 0px #000000,-2px 1px #000000,-2px 2px #000000,-1px -2px #000000,-1px -1px #000000,-1px 0px #000000,-1px 1px #000000,-1px 2px #000000,0px -2px #000000,0px -1px #000000,0px 0px #000000,0px 1px #000000,0px 2px #000000,1px -2px #000000,1px -1px #000000,1px 0px #000000,1px 1px #000000,1px 2px #000000,2px -2px #000000,2px -1px #000000,2px 0px #000000,2px 1px #000000,2px 2px #000000;
font-family: "M PLUS 1p", sans-serif;
font-size: 18px !important;
line-height: 20px !important;
}
yt-live-chat-text-message-renderer #content,
yt-live-chat-membership-message-renderer #content {
overflow: initial !important;
}
/* Hide scrollbar - スクロールバー非表示 */
yt-live-chat-item-list-renderer #items{
overflow: hidden !important;
}
yt-live-chat-item-list-renderer #item-scroller{
overflow: hidden !important;
}
/* Hide header and input - ヘッダーと入力欄非表示 */
#panel-pages,
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Reduce side padding - 余白設定 */
yt-live-chat-text-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
yt-live-chat-membership-item-renderer,
yt-live-chat-paid-sticker-renderer,
yt-live-chat-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Avatars - チャンネルアイコン */
/* 通常のチャット */
yt-img-shadow#author-photo.yt-live-chat-text-message-renderer,
yt-img-shadow#author-photo.yt-live-chat-text-message-renderer img{
width: 18px !important;
height: 18px !important;
border-radius: 18px !important;
margin-right: 4.5px !important;
}
/* メンバーシップ・スーパーチャット */
#author-photo.yt-live-chat-membership-item-renderer img#img,
#author-photo.yt-live-chat-paid-message-renderer img#img,
yt-img-shadow#author-photo.yt-live-chat-membership-item-renderer,
yt-img-shadow#author-photo.yt-live-chat-membership-item-renderer img,
yt-img-shadow#author-photo.yt-live-chat-paid-sticker-renderer,
yt-img-shadow#author-photo.yt-live-chat-paid-sticker-renderer img,
yt-img-shadow#author-photo.yt-live-chat-paid-message-renderer,
yt-img-shadow#author-photo.yt-live-chat-paid-message-renderer img{
display: none !important;
width: 30px !important;
height: 30px !important;
border-radius: 30px !important;
margin-right: 7.5px !important;
}
/* Member Badge - モデレーター・メンバーのバッジ(アイコン)サイズ */
.yt-live-chat-author-badge-renderer,
.yt-live-chat-author-badge-renderer svg.yt-icon {
width: 18px !important;
height: 18px !important;
}
/* Emoji - 絵文字・メンバー用スタンプ */
#message > img ,
img.yt-live-chat-text-message-renderer {
width: 28px !important;
height: 28px !important;
}
/* Hide badges - バッジ非表示. */
yt-live-chat-text-message-renderer #author-badges,
yt-live-chat-text-message-renderer #chat-badges {
vertical-align: text-top !important;
}
/* Timestamps - 時刻表示 */
yt-live-chat-text-message-renderer #timestamp {
display: none !important;
color: #999999 !important;
font-family: "M PLUS 1p", sans-serif;
font-size: 16px !important;
line-height: 16px !important;
font-weight: 500 !important;
}
/* Badges - 名前・バッジの色 */
yt-live-chat-text-message-renderer #author-name[type="owner"],
yt-live-chat-text-message-renderer #author-name.owner,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="owner"] {
color: #ffd600 !important;
}
yt-live-chat-text-message-renderer #author-name[type="moderator"],
yt-live-chat-text-message-renderer #author-name.moderator,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="moderator"] {
color: #5e84f1 !important;
}
yt-live-chat-text-message-renderer #author-name[type="member"],
yt-live-chat-text-message-renderer #author-name.member,
yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="member"] {
color: #0a8043 !important;
}
/* Channel names - チャンネル名 */
yt-live-chat-text-message-renderer #author-name {
color: #cccccc !important;
font-family: "M PLUS 1p", sans-serif;
font-size: 18px !important;
line-height: 18px !important;
font-weight: 700 !important;
}
/* 名前を隠す */
/* チャンネル名の余白削除 */
yt-live-chat-author-chip[is-highlighted] #author-name.yt-live-chat-author-chip,
yt-live-chat-author-chip {
padding: 0px 0px;
}
yt-live-chat-text-message-renderer #author-name::after {
content: ":";
margin-left: 2px;
}
/* Messages - チャット本文 */
yt-live-chat-text-message-renderer #message,
yt-live-chat-text-message-renderer #message * {
color: #ffffff !important;
font-family: "M PLUS 1p", sans-serif;
font-size: 18px !important;
line-height: 20px !important;
font-weight: 500 !important;
}
/* メンバーシップ関連 */
.yt-live-chat-membership-item-renderer #author-name {
color: #ffffff !important;;
font-family: "M PLUS 1p", sans-serif;
font-size: 19px !important;
line-height: 19px !important;
font-weight: 700 !important;
}
.yt-live-chat-membership-item-renderer#header-subtext,
.yt-live-chat-membership-item-renderer#header-primary-text {
color: #ffffff !important;;
font-family: "M PLUS 1p", sans-serif;
font-size: 15px !important;
line-height: 15px !important;
font-weight: 500 !important;
}
/* .yt-live-chat-membership-item-renderer#header-subtext { opacity: 0.7; } /* ○○のメンバーシップ */
/* SuperChat/Fan Funding Messages - スーパーチャットメッセージ */
div.yt-live-chat-paid-message-renderer#author-name-chip,
div.yt-live-chat-paid-message-renderer#author-name-chip span#author-name,
div.yt-live-chat-paid-sticker-renderer#author-name-chip,
div.yt-live-chat-paid-sticker-renderer#author-name-chip span#author-name{
/* ; /* 1行目の色 */
font-family: "M PLUS 1p", sans-serif;
font-size: 19px;
line-height: 19px;
font-weight: 700;
}
.yt-live-chat-paid-message-renderer#purchase-amount,
.yt-live-chat-paid-sticker-renderer#purchase-amount-chip,
.yt-live-chat-paid-message-renderer#purchase-amount-column,
.yt-live-chat-paid-sticker-renderer#purchase-amount-chip *,
yt-live-chat-donation-announcement-renderer #text,
yt-live-chat-donation-announcement-renderer #text * {
/* ; /* 2行目の色 */
font-family: "M PLUS 1p", sans-serif;
font-size: 15px !important;
line-height: 15px !important;
font-weight: 500 !important;
}
yt-formatted-string,
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content *,
yt-live-chat-membership-item-renderer #content,
yt-live-chat-membership-item-renderer #content *,
yt-live-chat-membership-item-renderer #message {
/* color: #ffffff !important; /* super-chat-content-color */
font-family: "M PLUS 1p", sans-serif;
font-size: 20px !important;
line-height: 20px !important;
font-weight: 500 !important;
}
yt-live-chat-paid-message-renderer,
yt-live-chat-membership-item-renderer {
margin: 4px 0 !important;
}
#header.yt-live-chat-membership-item-renderer {
background-color: #0a8043 !important;
/* margin: 4px 0 !important; */
}
yt-live-chat-text-message-renderer a,
yt-live-chat-membership-item-renderer a {
text-decoration: none !important;
}
/* 削除/管理されたメッセージは非表示 */
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-membership-item-renderer[is-deleted],
yt-live-chat-moderation-message-renderer,
yt-live-chat-auto-mod-message-renderer {
display: none !important;
}
yt-live-chat-ticker-renderer {
background-color: transparent !important;
box-shadow: none !important;
}
yt-live-chat-ticker-renderer {
display: none !important;
}
yt-live-chat-ticker-paid-message-item-renderer,
yt-live-chat-ticker-paid-message-item-renderer *,
yt-live-chat-ticker-sponsor-item-renderer,
yt-live-chat-ticker-sponsor-item-renderer * {
/* ; /* 2行目の色 */
font-family: "M PLUS 1p", sans-serif;
font-weight: 500 !important;
}
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-server-error-message,
yt-live-chat-banner-manager,
yt-live-chat-restricted-participation-renderer {
display: none !important;
}
/* アニメーションの設定 */
/* チャット欄をすごく小さくした時に表示を崩れないようにする */
yt-live-chat-app {
min-height: 0px;
min-width: 0px;
word-break: break-all;
}
/* チャット欄の上下を入れ替える(古いコメントが下、新しいコメントが上) */
/* スティッカーの名前の高さ */
div#author-name.yt-live-chat-paid-sticker-renderer,
span#price-column {
line-height: unset !important;
}
/* スティッカーのサイズ */
#sticker img {
width: 54px !important;
height: 54px !important;
}
/* 余白調整とかいろいろ */
div#author-info {
align-items: center !important;
padding: 8px 16px !important;
max-height: unset !important;
}
div#card {
padding: 0px 0px !important;
}
#author-info #author-photo {
margin-right: 11.25px !important;
}
div#action-panel.style-scope.yt-live-chat-renderer { display: none; } /* アンケートを非表示 */
#header-subtext.yt-live-chat-membership-item-renderer {opacity: 0.75;}
div#content.yt-live-chat-membership-item-renderer { background-color: #0f9d58 !important;; } /* メンスパ本文の背景色 */
div#message.yt-live-chat-membership-item-renderer { color: #ffffff !important; } /* メンスパ本文のテキスト色 */
/* アイコンの上書き */
/* メンバーシップギフト関連を非表示 */
ytd-sponsorships-live-chat-gift-purchase-announcement-renderer,
ytd-sponsorships-live-chat-gift-redemption-announcement-renderer {
display: none;
}原因6：OBSのアップデートによる不具合
OBSは定期的にアップデートしており、その影響で不具合が起きることもあります。
もしOBSのアップデートが原因だと考えられる場合は、対処があるまで他のソフトを使うか、OBSのダウングレードがオススメです。
OBSのダウングレードは下の「OBSのバージョン確認とダウングレード方法」を確認してください。
OBSに関連する他の記事
当ブログ「ちゃすろぐ」では動画投稿やPCに関係する記事を執筆しています。
他の実況者は下のOBS関連記事も読んでいるので、興味があればチェックしてください。
ちゃすく
共有やブックマークもお願いします
