LIVE Chat on Screen using OBS Studio - YouTube Livestreaming Chat ✔
Вставка
- Опубліковано 9 лют 2025
- Here's what I use, just copy the code and paste it into CSS :
docs.google.co...
_______________________________________________________________________
Alway bro, alway with these accents that save my day.
😂
true
This is litterally the only tutuorial that worked for me and ofc It was one of the clutch indian guys. Love them so much!
FULL CSS CODE : -
@import url("fonts.googleapis.com/css?family=Changa One");
@import url("fonts.googleapis.com/css?family=Imprima");
/* 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-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: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-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. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
yt-live-chat-paid-message-renderer #header {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
width: 24px !important;
height: 24px !important;
border-radius: 24px !important;
margin-right: 6px !important;
}
/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
display: none !important;
vertical-align: text-top !important;
}
/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
color: #999999 !important;
font-family: "Imprima";
font-size: 16px !important;
line-height: 16px !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: #0f9d58 !important;
}
/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
color: #cccccc !important;
font-family: "Changa One";
font-size: 20px !important;
line-height: 20px !important;
}
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: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
color: #ffffff !important;
font-family: "Changa One";
font-size: 20px !important;
line-height: 20px !important;
}
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
color: #ffffff !important;
font-family: "Imprima";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-paid-message-renderer {
margin: 4px 0 !important;
}
yt-live-chat-legacy-paid-message-renderer {
background-color: #0f9d58 !important;
margin: 4px 0 !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none !important;
}
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
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 * {
color: #ffffff !important;
font-family: "Imprima";
}
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
display: none !important;
}
yt-live-chat-banner-manager {
display: none !important;
}
yt-live-chat-action-panel-renderer,
yt-live-chat-renderer #action-panel {
display: none !important;
}
Google drive link is not working. File seems to be deleted. I used the above code and its not working. Background is still showing up. Can you please help?
@@GameForLifeSunny mine also, background is still showing i couldnt find fix
Legend, it's not only straight-forward, but the code puts it over the edge. Thanks so much!
I followed instructions and now my UA-cam Live Chat pop-up is not working anymore...
work for the 1st time and second stream it wont show any. i try to clear and make new one still no display
you have to change the url everytime you live
I'm so proud man, actually this guy is not yapping about StreamElements, thank you I'm gonna download this video
TY DUDE MY STREAMS GONNA BE PERFECT
This was insanely useful tysm!
idk why streamelements don't display YT chat, this is a good alternative as a good video, thank you
thanks you so much this is so helpful and I subbed btw
great and easy explanation
Thankx a lot for this video now I csn stream perfectly
Thanks Brother! It worked perfectly!
You are awesome! Right to the point!
thank you brother, that helped alot
bro which code do i use specifically because the google doc has like pages of code
Its at the bottom of the video bro, cope and paste it easy and it will disappear @mr.4k_
@@mr.4k_the whole code everything in theat doc
thanks man straight to the point.
Thank you, dude, i subbed🔥🔥
😍 Thanks, work as I wanted it to be
Not working anymore
why i'm not transparant ? i already copy css from your drive. and still doesn't not transparant.
you are the goat bro.
thank you! it works ^w^
PB HACKS THANK YOU SO MUCH IM STREAMING TOMMOROW AND THIS IS PERFECT THANK YOU SO MUCH
Thanks man, fast and easy tutorial
Thanks so much for this !!
Thank you so much! ❤🎉
thank bro
Perfect video bro, Thanks alot
finally a useful video
Please help mee. I can't find that code. I'm clicking the link but, I can't find the code.
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
wow thanks man
Thank you so much for this video bro :)
once please put me that code i am confuse in that code for me getting a list
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
thank u bro
can anyone tell me the custom CSS i cant copy and paste it idk why so can anyone tell me here plss need it asap
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
@@PBHackzbro your a year late 💀
@@fubbet_so are you. And me
not working for now
Worked for me
Try follow all steps properly and copy whole text
man, i have paste the code and first few second work then it turn back to normal
which code do i specifically use or do i have to copy the entire thing?
thanks ur the best
thanks bro it works
thank you
hello, i correct understund ? every time need change this popchat link stream time ?
I just need a tutorial to understand what all the css code means.
How to hide chat from viwers ? but we can see that on screen
ua-cam.com/video/q8nBpzy0W5A/v-deo.html
Watch this and follow on obs
buy a new second monitor
what was it that you copied and pasted into the OBS to only display the chat and not that extra stuff??
THX bUDDY
Nope. I can't seem to find a way that works. What you are showing me, i can not find it
can we see while playing game ? .. not in obs on gaming screen
no
THNX BRO
thanks bro!
man I can only see the overlay in obs not in my game help me pls
try this code
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
Thnak you much bro
bro can we made it fade out
Can i see it live over my game becouse i have only 1 monitor
Man I look at every youtube video to see how to add the chat it keep going to streamlabs link and only the twitch one works for obs
danggg thx bro
thxxxx this helped alot
I need to know what 2:09 is I don’t know how he got it?!
can you upload the code again bro?
i also applied your trick 100% working
thanks for help me
When I paste the live chat link,the obs show me the youtube website(Something went wrong),why?
try this code
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
what happened to the code???
hey my chat isn't appering ingame
bro when we will live and playing game can we see liive chat on ower screen
while playing
thx u for the video
thx is not even a word
@@Dennis_Phoenix178 thx means thanks
TY!!!
The codes is wrong on me
I get wierd chat
it doesnt show up on my game
Works for me
I want to ask. How do you chat while doing the stream after you put the chat
You can use your phone to chat, or maybe use 2 monitors, 1 for your stream and one to read the chat also reply
@@kyromxiq545 oh Thank you!
Bro but chats are not showing in game it is showing in obs and youtube live screen only
Yea.. that's how it works
@@PBHackz so how can I see those chats?
@@SGAMING-uq7tl Use Restream : restream.io/
@@PBHackz Bro actually i stream through youtube
Edit: Will this work in youtube bro can I see users chats in game after this restream process
how do i see the chat when im in the game
goateed
Thanks but why the link is sooo slow to open and can you put it on the description because it's soo hard to copy the script and it's sooo slow
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
Do I have to copy the entire thing? It’s a huge amount of code!
CTRL + A , CTRL C , CTRL V to paste , how's it difficult man ?
CTRL A = will select all the text code
quick and ez ty
good tutorial
Bro kinda doesnt work anymore for me?
thx
thankyou
can someone paste what he pasted cuz the docs is messed up
me too
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
do it show while playing??
i cant copy that because it wont let me copy i
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
hi, is it possible to change the font and text colors? thank you in advance
yes
does it work guys, im scared to put any script, since the channel named "hacks"
I use one monitor..also my game can't be turned to windowed borderless it's playable only on fullscreen..an I want to see the live chat in game while playing in the same screen ..how can I do that please?
I recommend getting a 2nd monitor try to find your nearest tech store and trying to get your budget monitor
So will it came on stream screan
what is this song?
bro i need horizontal scrolling chat
✔
nice vidd
the code isnt in the description /:
here’s the code
/* 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-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: "Comfortaa";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-text-message-renderer #content,
yt-live-chat-legacy-paid-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. */
yt-live-chat-header-renderer,
yt-live-chat-message-input-renderer {
display: none !important;
}
/* Reduce side padding. */
yt-live-chat-text-message-renderer,
yt-live-chat-legacy-paid-message-renderer {
padding-left: 4px !important;
padding-right: 4px !important;
}
yt-live-chat-paid-message-renderer #header {
padding-left: 4px !important;
padding-right: 4px !important;
}
/* Avatars. */
yt-live-chat-text-message-renderer #author-photo,
yt-live-chat-paid-message-renderer #author-photo,
yt-live-chat-legacy-paid-message-renderer #author-photo {
width: 25px !important;
height: 25px !important;
border-radius: 25px !important;
margin-right: 6.25px !important;
}
/* Hide badges. */
yt-live-chat-text-message-renderer #author-badges {
display: none !important;
vertical-align: text-top !important;
}
/* Timestamps. */
yt-live-chat-text-message-renderer #timestamp {
color: #999999 !important;
font-family: "Comfortaa";
font-size: 16px !important;
line-height: 16px !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: #ff0000 !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: #ff8000 !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: #ffff00 !important;
}
/* Channel names. */
yt-live-chat-text-message-renderer #author-name {
color: #cccccc !important;
font-family: "Comfortaa";
font-size: 20px !important;
line-height: 20px !important;
}
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: "Comfortaa";
font-size: 18px !important;
line-height: 18px !important;
}
/* SuperChat/Fan Funding Messages. */
yt-live-chat-paid-message-renderer #author-name,
yt-live-chat-paid-message-renderer #author-name *,
yt-live-chat-legacy-paid-message-renderer #event-text,
yt-live-chat-legacy-paid-message-renderer #event-text * {
color: #ffffff !important;
font-family: "Comfortaa";
font-size: 20px !important;
line-height: 20px !important;
}
yt-live-chat-paid-message-renderer #purchase-amount,
yt-live-chat-paid-message-renderer #purchase-amount *,
yt-live-chat-legacy-paid-message-renderer #detail-text,
yt-live-chat-legacy-paid-message-renderer #detail-text * {
color: #ffffff !important;
font-family: "Comfortaa";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-paid-message-renderer #content,
yt-live-chat-paid-message-renderer #content * {
color: #ffffff !important;
font-family: "Comfortaa";
font-size: 18px !important;
line-height: 18px !important;
}
yt-live-chat-paid-message-renderer {
margin: 4px 0 !important;
}
yt-live-chat-legacy-paid-message-renderer {
background-color: #ffff00 !important;
margin: 4px 0 !important;
}
yt-live-chat-text-message-renderer a,
yt-live-chat-legacy-paid-message-renderer a {
text-decoration: none !important;
}
yt-live-chat-text-message-renderer[is-deleted],
yt-live-chat-legacy-paid-message-renderer[is-deleted] {
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 * {
color: #ffffff !important;
font-family: "Comfortaa";
}
yt-live-chat-mode-change-message-renderer,
yt-live-chat-viewer-engagement-message-renderer,
yt-live-chat-restricted-participation-renderer {
display: none !important;
}
@@hextropica omg thanks you are my savor! ❤❤❤❤🤗🤗😄🥺🥺😍😍
There’s a link to the code
I just need the code
how to see live chat in gameplay? (not only in obs)
lmk if you find the answer
@@TheRaptorGamer don't know about youtube, bt i use a app name "restream" to see chats on game screen on twitch. It works perfectly.
Why is said chat unavailable for me
change your chat link bruh
its says something went wrong
anonymousx0101@gmail.com send a screenshot
The docs link i cant copy,can PB Hackz send again pls
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
why the code i copy dont work!!!!
same
same.........
docs.google.com/document/d/1jCUVm299LiNdrrbh3n5RH7TDoILZ7z-ImJmJNAp4IEs/edit?usp=sharing
bro file removed can you upload again I want the code
Ok
MAlayali aano