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.