ミルダムのコメント欄をYouTubeみたいにOBSで透過させる

① ミルダムのコメント欄は以下のURLからポップアウトできます
https://www.mildom.com/popout/chat/[ユーザーID]

② OBSのソースに「ブラウザ」を追加します

③ ①のURL ( https://www.mildom.com/popout/chat/[ユーザーID] ) を、②の「URL」の項目にコピペします

④ 「カスタムCSS」の項目に以下のコードをコピペします

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+SC&family=Noto+Sans+TC&family=Noto+Sans+KR&family=Noto+Sans&display=swap");

/* ヘッダーの消去 */
.x2ad5b-1 { padding-top: 0px; padding-bottom: 0px }
.x2ad5b-3 { display: none; }
.chat-panel--has-anounce { padding-top: 0px; padding-bottom: 0px }
.chat-panel__header { display: none }
.pay-message-edit { display: none }

/* フッターの消去 */
.x2ad5b-4 {display: none }
.chat-panel__footer-container { display: none }
.chat-panel___mention-follow-panel { display: none !important }

/* フォントの変更 */
html, body, #root { font-family: "Noto Sans JP","Noto Sans SC","Noto Sans TC","Noto Sans KR","Noto Sans", sans-serif; }

/* フォントのサイズ変更と縁取り */
.message-list-container>.message-list {
    font-size: 17px;
    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;
}
.content { font-size: 17px !important; } /* プレミアムコメントのフォントサイズ(本文) */
.coin { font-size: 14px !important; } /* プレミアムコメントのコインのフォントサイズ */

/* 左寄せ */
.message-list { margin: 0px 0px 0px -20px; }
.ReactVirtualized__Grid__innerScrollContainer>div { padding: 0px 0px !important; }
.chat-panel { border: none }

/* レベルの非表示(表示させる場合は下記一行を削除) */
.sc-1oendbw-0 { display: none !important }
.chat-panel .level { display: none }

/* 背景透過 */
html, body, #root, #root * {background-color: transparent !important; }
.iTLyos { background: transparent; border-left: none }
::-webkit-scrollbar-thumb { display: none }

⑤ 完成

おまけ

デフォのダークテーマからライトテーマに変更するだけのカスタムCSS(フォント変更なし、縁取りなし)

/* ヘッダーの消去 */
.x2ad5b-1 { padding-top: 0px; padding-bottom: 0px }
.x2ad5b-3 { display: none; }
.chat-panel--has-anounce { padding-top: 0px; padding-bottom: 0px }
.chat-panel__header { display: none }
.pay-message-edit { display: none }

/* フッターの消去 */
.x2ad5b-4 {display: none }
.chat-panel__footer-container { display: none }
.chat-panel___mention-follow-panel { display: none }

/* 左寄せ */
.ReactVirtualized__Grid__innerScrollContainer>div { padding: 0px 0px !important; }
.chat-panel { border: none }

/* レベルの非表示(表示させる場合は下記一行を削除) */
.sc-1oendbw-0 { display: none !important }
.chat-panel .level { display: none }

/* ふつうのライトテーマ(フォント変更なし, 縁取りなし) */
.btTIJv { background: #f8f8f8 !important; border-left: none }
.sc-173ztwo-0 { color: #232323 !important; }
::-webkit-scrollbar-thumb { display: none }