Skip to content

Instantly share code, notes, and snippets.

@i5heu

i5heu/A-README.md

Forked from penbuvt/obs-chat-overlay.css
Last active September 26, 2025 12:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save i5heu/f7f9a83ae4eaab48dcabff0a3d8d64e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save i5heu/f7f9a83ae4eaab48dcabff0a3d8d64e8 to your computer and use it in GitHub Desktop.
Download ZIP
OBS chat CSS
Raw
A-README.md

OBS Chat CSS — README (Twitch Embed + YouTube)

Minimal, transparent CSS for embedding Twitch and YouTube live chat as on‑stream overlays in OBS Studio.

Included files:

  • obs-chat-overlay.css — on‑stream overlay (transparent, bold, high contrast)
  • obs-chat-window.css — compact styling for small overlays/windows
  • X-LICENSE — BSD Zero Clause (0BSD)

Quick Start — Twitch Embed Chat in OBS (Browser Source)

  1. Use this exact embed URL

https://www.twitch.tv/embed/<your_channel>/chat?parent=localhost
  • Replace <your_channel> with your Twitch channel name.
  1. Add it to OBS
  • OBS → Sources → + → Browser
  • Name it (e.g., Twitch Chat (Embed)) → OK
  • URL: paste the URL above
  • Width/Height: start with 400 × 400 (adjust to fit)
  • Custom CSS: paste one of the provided stylesheets:
    • obs-chat-overlay.css (recommended for on‑stream bubbles)
    • obs-chat-window.css
  • OK, then position/scale on your canvas.
  1. If styles don’t appear
  • Right‑click the Browser source → Refresh cache of current page.

Quick Start — YouTube Live Chat in OBS (Browser Source)

Use YouTube’s pop‑out live chat URL for your current live stream.

  1. Build the pop‑out chat URL

https://www.youtube.com/live_chat?v=<VIDEO_ID>&is_popout=1
  • Replace <VIDEO_ID> with the ID of your live video/stream.
  • You can also obtain this by opening your live stream page on YouTube, clicking the chat menu (⋮) and choosing Popout chat; copy the URL from that window.
  1. Add it to OBS
  • OBS → Sources → + → Browser
  • Name it (e.g., YouTube Chat (Pop‑out)) → OK
  • URL: paste the pop‑out chat URL
  • Width/Height: start with 400 × 900 (adjust to fit)
  • Custom CSS: paste one stylesheet (same as Twitch):
    • obs-chat-overlay.css (overlay bubbles)
    • obs-chat-window.css (compact)
  • OK, then position/scale on your canvas.
  1. If styles don’t appear
  • Right‑click the Browser source → Refresh cache of current page.
  • Press OK on the Browser Properties window (CSS is only after OK applied)
  • Write a few messages into the chat

💡 Tip: The provided CSS already hides YouTube’s extra UI (headers/tickers/reaction panel) and formats messages for readability.

Tips (Both Platforms)

  • Font size / density: Switch between the two CSS files or tweak font-size in the CSS.
  • Scene reuse: Use Add Existing to reuse the same Browser source across scenes for lower CPU/RAM.
  • Privacy/moderation: Platform rules (sub‑only, mods, bans) still apply and are enforced by Twitch/YouTube.

Troubleshooting

  • Blank/blocked Twitch embed

    • Confirm the URL matches exactly (including both parent=localhost parameters).
    • parent values contain only host names (no scheme or port).

  • YouTube chat doesn’t load

    • Ensure your stream is live and the v= parameter is the correct live video ID.
    • Recreate the pop‑out via the chat menu if unsure.

  • Scrollbars / clipping (either)

    • Increase Browser Source Height if long messages clip; our CSS hides extra tracks.

  • Lag / performance

    • Keep one chat Browser Source and reuse across scenes.
    • Set Browser to a custom refresh rate of 4 FPS

License

BSD Zero Clause (0BSD). Free to use, modify, and redistribute. See LICENSE.

References & Credibility (no peer‑reviewed sources applicable)

Raw
obs-chat-overlay.css
html { background-color: transparent !important; }
body { background-color: transparent !important; margin: 0px auto; overflow: hidden; }
/* BEGIN YOUTUBE */
yt-live-chat-renderer,
#items.yt-live-chat-item-list-renderer > .yt-live-chat-item-list-renderer {
background-color: transparent;
}
#items yt-live-chat-text-message-renderer > #content,
ytd-sponsorships-live-chat-gift-redemption-announcement-renderer > #content {
background-color: rgba(255, 255, 187, 0.488);
padding: 4px;
border: 2px ridge #d3d7cf;
border-radius: 4px;
box-shadow: 4px 4px 4px 0 #55575380;
}
#panel-pages,
yt-live-chat-header-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-img-shadow,
#ticker {
display: none !important;
}
yt-live-chat-text-message-renderer {
font-size: 20px;
padding: 4px 8px;
}
#visible-banners yt-live-chat-banner-renderer #header {
display: none !important;
}
#visible-banners yt-live-chat-banner-renderer #contents {
height: auto !important;
transform: translateY(0px) !important;
}
#visible-banners yt-live-chat-banner-renderer yt-live-chat-text-message-renderer #content.yt-live-chat-text-message-renderer {
font-size: 0.9em !important;
}
yt-live-chat-text-message-renderer[in-collapsed-banner] #content.yt-live-chat-text-message-renderer {
white-space: inherit !important;
overflow: inherit !important;
}
yt-live-chat-text-message-renderer[in-banner] {
padding: 4px !important;
}
yt-live-chat-banner-manager[has-active-banner] {
background: none !important;
}
#live-chat-item-list-panel > #contents > #item-scroller {
scrollbar-width: none !important;
}
yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer {
bottom: unset;
top: 0;
right: unset;
padding: 0;
}
yt-live-chat-poll-header-renderer,
#content.yt-live-chat-poll-choice {
/*font-size: 0.9em;*/
padding: 2px;
}
#reaction-control-panel {
display: none;
}
/* END YOUTUBE */
/* BEGIN TWITCH */
#root .chat-room {
background: none;
background-color: transparent;
}
#root .stream-chat-header,
#root .chat-room__content > div:first-child,
#root .chat-input,
#root .chat-line__status[data-a-target="chat-welcome-message"] {
display: none !important;
}
#root .scrollable-area[data-a-target="chat-scroller"] {
scrollbar-width: none !important;
}
#root .scrollable-area[data-a-target="chat-scroller"] .simplebar-track {
display: none !important;
}
#root .chat-line__username {
font-weight: bold;
}
#root .chat-line__message {
font-size: 20px;
font-weight: bold;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.649);
padding: 8px;
border: 2px ridge #d3d7cf;
border-radius: 4px;
box-shadow: 4px 4px 4px 0 #55575380;
margin: 8px;
}
/* END TWITCH */
Raw
obs-chat-window.css
body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
/* BEGIN YOUTUBE */
#panel-pages,
yt-live-chat-header-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-img-shadow,
#ticker {
display: none !important;
}
yt-live-chat-text-message-renderer {
font-size: 18px;
padding: 4px 8px;
}
#visible-banners yt-live-chat-banner-renderer #header {
display: none !important;
}
#visible-banners yt-live-chat-banner-renderer #contents {
height: auto !important;
transform: translateY(0px) !important;
}
#visible-banners yt-live-chat-banner-renderer yt-live-chat-text-message-renderer #content.yt-live-chat-text-message-renderer {
font-size: 0.9em !important;
}
yt-live-chat-text-message-renderer[in-collapsed-banner] #content.yt-live-chat-text-message-renderer {
white-space: inherit !important;
overflow: inherit !important;
}
yt-live-chat-text-message-renderer[in-banner] {
padding: 4px !important;
}
#live-chat-item-list-panel > #contents > #item-scroller {
scrollbar-width: none !important;
}
yt-live-chat-renderer[has-action-panel-renderer] #action-panel.yt-live-chat-renderer {
bottom: unset;
top: 0;
right: 0;
padding: 0;
}
yt-live-chat-poll-header-renderer,
#content.yt-live-chat-poll-choice {
/*font-size: 0.9em;*/
padding: 2px;
}
#reaction-control-panel {
display: none;
}
/* END YOUTUBE */
/* BEGIN TWITCH */
#root .stream-chat-header,
#root .chat-room__content > div:first-child,
#root .chat-input,
#root .chat-line__status[data-a-target="chat-welcome-message"] {
display: none !important;
}
#root .scrollable-area[data-a-target="chat-scroller"] {
scrollbar-width: none !important;
}
#root .scrollable-area[data-a-target="chat-scroller"] .simplebar-track {
display: none !important;
}
#root .chat-line__message {
font-size: 18px;
padding: 6px 8px;
}
/* END TWITCH */
Raw
X-LICENSE
BSD Zero Clause License
Copyright (c) 2023-2024 Penbu <[email protected]> and i5heu
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment