What Up!!!
Rumble updated there video play UI today! It is a great step in the right direction, but it messed up the chat overlay code.
Copy the code below and paste it into the a browser source in OBS.
3 Settings that you need to be aware of:
- I use 1920x1680 browser source so that I can strink it to my different scene sizes.
- Be sure to use a Key Filter to filter out #061726.
- Use your permanant live page like this: https://www.rumble.com/c/whatupian/live
- Go back an watch my pervious tutorials, only thing different is the code. (https://rumble.com/v2g45d4-how-to-add-rumble-chat-to-your-live-stream.html)
Here is the updated code that I use:
--------------------------- COPY CODE BELOW ---------------------------
.media-page-chat-aside-chat-wrapper-fixed{
position:fixed !important;
display:block !important;
top:0px !important;
left:0px !important;
margin:0px !important;
width:100vw !important;
overflow:hidden !important;
}
.container{
background-color: #061726; /* Use a source key to remove this background color; */
}
#chat-history-list{
overflow:hidden !important;
}
.chat {
position: fixed !important;
display:block !important;
top:0px !important;
left:0px !important;
z-index: 900;
font-size: 28px;
margin:0px !important;
overflow:hidden !important;
}
.chat-history--row {
width:700px !important;
background: rgb(2,0,36);
background: linear-gradient(9deg, rgba(2,0,36,1) 0%, rgba(189,189,189,1) 0%, rgba(255,255,255,1) 100%);
padding:8px;
border-radius: 10px;
animation-name: fadeOut;
animation-duration: 0.7s;
animation-delay: 120s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.chat-history--user-avatar{
width:60px;
height:60px;
border-radius:100;
}
.chat-history--username {
color: #008000; /* Username Color */
font-weight:800;
padding:1px;
overflow:hidden;
}
.chat-history--badges-wrapper .chat-history--user-badge{
width:30px;
height:30px;
}
.chat-history--message-wrapper .chat-history--emote{
width:48px;
height:48px;
}
i.user-image--letter{
width:60px;
height:60px;
}
.chat-history--message{
color: #000000; /* Message Text Color */
display:block;
overflow:hidden;
font-weight:600;
}
#chat-message-form {
display: none;
}
/* Rumble Rants */
#chat-sticky-rants{
z-index:1000;
background: #061726;
padding:10px 0px;
position: fixed;
top: 0px;
left: 700px;
min-width: 1000px;
max-width: 1000px;
font-size: 28px;
}
.chat--history-list-shadow{
display:none;
}
.chat-history--row {
animation-name: fadeOut;
animation-duration: 0.7s;
animation-delay: 300s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
main{
margin:0px !important;
}
.nonconstrained{
}
.header{
display:none !important;
}
.main-content{
margin:0px !important;
display:none !important;
}
.page__footer{
display:none !important;
}
#main-menu{
display:none !important;
}
.media-page-chat-aside-chat-wrapper-fixed{
}
.chat--header{
display:none !important;
}
.chat-form-overflow-wrapper{
display:none !important;
}
.media-page-chat-container-toggle-btn{
display:none !important;
}
.chat--signin-container{
display:none !important;
}