youtube-chat-obs-styles /

Filename Size Date modified Message
fortis styles
2.5 KB
final readme change for now
3.9 KB
Update for new youtube layout changes
820 B
reorganize and synchronize


This is a collection of css files that you can use with the CLR Browser or Browser Source OBS source media type.

It allows you to properly add youtube chat into any OBS stream.

Getting Started

Adding To your OBS scene

Note: In older versions of OBS, the entry will be called CLR Browser, while in newer versions it will be called BrowserSource. The settings will be laid out differently, but can be applied all the same

1. Right click in your scene and select BrowserSource.

Create BrowserSource Entry

2. Name it whatever you like.

Name The Entry

3. Get the URL of the CURRENT stream chat you want by popping out the chat.

Popout Chat

Popout Chat URL

4. Paste that url into the BrowserSource URL box.

Paste The Url

5. Set the chat dimensions (width, height) to whatever you prefer.

Set Dimensions

6. Copy the contents of streamable_chat.css into the css box

Note: Feel free to first copy the contents into a text editor to modify it

Direct link to streamable_chat.css: Click Here

Copy CSS

Paste CSS

7. Press the OKAY button in OBS and you should now have a chat overlay!


Note: Any time you change streams (such as running a scheduled stream instead of the 'Stream Now' option), you'll need to update the url to your current stream's popout url. You can right click your BrowserSource and select the properties option to edit the url, dimensions, etc. Any time youtube changes the way their website works, check back here for updates!

8. Further Customization

At this point, you can customize the CSS to your heart's content. If you know CSS rules, you can do some pretty exotic things such as slide in/fade out animations (snippet located in useful_snippets.css):

image preview

I provide this free for all to use and modify, with no small print exceptions.

If you want to support my projects, feel free to drop a donation!