Skip to content

Instantly share code, notes, and snippets.

@tamaina tamaina/Readme.md
Last active Jan 5, 2020

Embed
What would you like to do?
OBSでYouTubeのコメビュを表示・改造する

YouTubeのライブのコメントをOBSに(いい感じに)表示します。

使い方

OBS上に「ブラウザ」を追加する

  1. ソース「ブラウザ」を追加する
    URL: https://www.youtube.com/live_chat?v=<VID> ← のところはv=で表現される生放送の動画IDにおきかえる
    高さ・幅: いい感じに調整する
    カスタムCSS: 下のdefault.cssを張り付け、上下さかさまにしたいならさらにreverse.cssの内容をつけくわえる
  2. 完成

カスタマイズ

CSSなので、CSSの構文でカスタマイズできます。

別の要素をカスタマイズしたいなら、ブラウザで先ほどのURLにアクセスし、F12キーを押し、F12ツールで確認しながらやっていっていってみてください。

アニメーション

アニメーションを加えたいとき、anime.cssの内容をつけくわえるとアニメーションするようになります。

アニメの種類は、keyframeを編集したりタグの設定を編集したりすることで変更できるでしょう。

animate.cssなどを参考にやってみてください。

一部の種類の表示を消す

display: noneを活用して、以下のようにそれぞれ書き加えると見えなくすることができます。

  • コメントを消す yt-live-chat-text-message-renderer { display: none }
  • スーパーチャットを消す
    yt-live-chat-paid-message-renderer { display: none }
  • 新規メンバーを消す
    yt-live-chat-legacy-paid-message-renderer { display: none }
@keyframes anime {
/*!
* Animation from animate.css
*
* animate.css -http://daneden.me/animate
* Version - 3.7.0
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2018 Daniel Eden
*/
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
yt-live-chat-text-message-renderer, yt-live-chat-paid-message-renderer, yt-live-chat-legacy-paid-message-renderer {
animation-duration: .5s;
animation-fill-mode: both;
animation-name: anime;
}
body {
font-family: Nasu, sans-serif; /*'使いたいフォント名' */
font-weight: 400; /* フォントのウェイト */
background-color: rgba(0, 0, 0, 0);
margin: 0px auto; overflow: hidden;
--yt-live-chat-background-color: rgba(255, 255, 255, 0.3); /* チャット背景 */
--yt-live-chat-action-panel-background-color: transparent; /* いじらない */
--yt-live-chat-action-panel-background-color-transparent: transparent; /* いじらない */
--yt-live-chat-mode-change-background-color: transparent; /* いじらない */
--yt-live-chat-message-background-color: rgba(255, 255, 255, 0); /* 一般ユーザーのコメント背景 */
--yt-live-chat-message-highlight-background-color: rgba(255, 128, 128, 0.1); /* 配信主/モデレーターのコメント背景 */
--yt-live-chat-secondary-text-color: #333; /* 一般ユーザーの名前の文字色 */
--message-shadow-color: #fff; /* コメントのふちどりの色 */
--message-shadow: var(--message-shadow-color) 2px 0px, var(--message-shadow-color) -2px 0px, var(--message-shadow-color) 0px -2px, var(--message-shadow-color) 0px 2px, var(--message-shadow-color) 2px 2px , var(--message-shadow-color) -2px 2px, var(--message-shadow-color) 2px -2px, var(--message-shadow-color) -2px -2px, var(--message-shadow-color) 1px 2px, var(--message-shadow-color) -1px 2px, var(--message-shadow-color) 1px -2px, var(--message-shadow-color) -1px -2px, var(--message-shadow-color) 2px 1px, var(--message-shadow-color) -2px 1px, var(--message-shadow-color) 2px -1px, var(--message-shadow-color) -2px -1px;
/* ↑コメントのふちどりの指定 (2pxぶん) */
--img-size: 48px; /* 画像サイズ */
--yt-live-chat-emoji-size: 42px; /* 絵文字サイズ */
--author-bardge-size: 42px; /* バッジサイズ */
--live-chat-author-icon-size: 75px; /* スーパーチャットアイコンサイズ */
}
yt-live-chat-header-renderer {
/* ヘッダーを非表示 */
display: none;
}
#ticker {
display: none;
}
#panel-pages {
/* コメントを書き込む部分を非表示 */
display: none;
}
yt-live-chat-viewer-engagement-message-renderer {
/* ポリシーなんたらを非表示 */
display: none;
}
yt-live-chat-item-list-renderer[allow-scroll] #item-scroller.yt-live-chat-item-list-renderer {
/* スクロールバーを消す */
overflow-y: hidden
}
yt-live-chat-text-message-renderer {
padding: 6px 16px /* コメントの余白 */
}
yt-live-chat-text-message-renderer[author-type=""] {
/* 一般ユーザーのコメントにも背景色を */
background: var(--yt-live-chat-message-background-color)
}
#author-name.yt-live-chat-author-chip {
/* ユーザー名チップ */
border-radius: 6px; /* 角はもうすこし丸みをつける */
font-weight: 700; /* 太字 */
}
.yt-live-chat-text-message-renderer {
font-size: 32px; /* フォントサイズ */
}
#author-photo.yt-live-chat-text-message-renderer {
margin-right: 8px; /* 画像と名前の間隔 */
}
img.yt-img-shadow {
/* 画像の高さ・幅を定義 */
width: var(--img-size);
height: var(--img-size);
}
#author-name.yt-live-chat-author-chip {
padding: 2px 4px;
}
#author-name.yt-live-chat-author-chip[type=""] {
/* 一般ユーザーの名前にも背景を付けたい */
background-color: #fff !important;
}
img.yt-live-chat-author-badge-renderer, yt-icon.yt-live-chat-author-badge-renderer {
/* 名前バッジ */
width: var(--author-bardge-size);
height: var(--author-bardge-size);
}
#author-name.yt-live-chat-author-chip[type="member"] {
/* スポンサーの名前にも背景を付けたい */
background-color: #0a0;
--yt-live-chat-sponsor-color: #fff; /* 文字色を変える */
}
#author-name.yt-live-chat-author-chip[type="moderator"] {
/* モデレーター */
background-color: rgb(95, 132, 241); /* 背景色 */
--yt-live-chat-moderator-color: #fff; /* 文字色を変える */
}
.yt-live-chat-text-message-renderer#message {
/* テキストをふちどる */
text-shadow: var(--message-shadow)
}
/* スーパーチャット&新規メンバー */
yt-live-chat-paid-message-renderer, yt-live-chat-legacy-paid-message-renderer {
padding: 6px 16px;
}
yt-live-chat-paid-message-renderer,
#card.yt-live-chat-legacy-paid-message-renderer,
#detail-text.yt-live-chat-legacy-paid-message-renderer {
font-size: 36px
}
#author-name.yt-live-chat-paid-message-renderer,
#event-text.yt-live-chat-legacy-paid-message-renderer {
font-size: 32px;
}
#content.yt-live-chat-paid-message-renderer,
#card.yt-live-chat-legacy-paid-message-renderer,
#header.yt-live-chat-paid-message-renderer {
padding: 14px 28px
}
#header.yt-live-chat-paid-message-renderer {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
yt-live-chat-paid-message-renderer[show-only-header] #header.yt-live-chat-paid-message-renderer {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
#card.yt-live-chat-legacy-paid-message-renderer,
#card.yt-live-chat-paid-message-renderer {
border-radius: 8px
}
#author-photo.yt-live-chat-paid-message-renderer,
#author-photo.yt-live-chat-paid-message-renderer > img,
#author-photo.yt-live-chat-legacy-paid-message-renderer > img {
width: var(--live-chat-author-icon-size);
height: var(--live-chat-author-icon-size);
}
#item-offset.yt-live-chat-item-list-renderer {
position: initial;
}
#item-scroller.animated.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer {
bottom: initial;
top: 0;
display: flex;
flex-wrap: wrap-reverse;
}
yt-live-chat-text-message-renderer {
width: 100%
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.