OBS Twitch Hype Train Overlay

README.md

OBS Twitch Hype Train Overlay

With these settings, you can show the status of your Hype Train in your livestream. Just add a browser source in OBS with the following settings:

URL: https://www.twitch.tv/popout/<channelname>/chat?darkpopout

With: min. 500

Height: min. 150

Custom CSS:

@import url("https://echtkpvl.de/twitch-hypetrain.css");

By using my URL, you will get the latest update automatically. If you are concerned about your security or something else, use this code and visit this tutorial, if something is weird or broken:

html, body, .tw-root--theme-light, .tw-root--theme-dark, .popout-chat-page, .chat-room, .ember-chat-container, .community-highlight-stack__card--wide {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
}

.chat-list--default, .stream-chat-header, .chat-input, .channel-leaderboard { display: none!important; }
.consent-banner, .chat-signup-gate-overlay, .community-highlight-stack__backlog-card, .marquee-animation { display: none!important; }
div.Layout-sc-1xcs6mc-0.hZLfAO, .pinned-chat__highlight-card, div:has(.bits-leaderboard-expanded__header) { display: none!important; }

.chat-room__content {
    padding-top: 25px;
}

.community-highlight {
    background: rgba(0,0,0,0)!important;
    background-color: rgba(0,0,0,0)!important;
    border: unset!important;
    box-shadow: unset!important;
}

div[class^='Layout-sc'] {
    border-bottom: unset!important;
}

div[class^='Layout-sc'] > button {
    display: none;
}

Screenshots

FAQ

Q: Is there always a visible element in my overlay?

A: No. If there is no Hype Train / Poll / Prediction, the overlay is transparent.

Issues

If you start a poll / prediction or have something pinned, they will be shown in the overlay.

Hi there! This is fantastic, but it seems that it shows the leaderboard once a hype train is finished (Twitch maybe updated something). Would love if it were possible to update the css to reflect that change :)

Thanks for your Feedback @FredTwitch I can't see this behavior but added something. Please tell me if this solved your issue

I tried this today and also get no transparent view when Hypetrain is not active:

@StephanBeutel I've changed and optimized some parts of the code. This time it also happened in my OBS, so it's most likely fixed everywhere.