OBS Clip Player, Chat and Custom Text Overlay
This is an easy to use OBS Clip Player, Live Chat and Custom Text Overlay. It's ideal for your Coming Soon, Be Right Back and Privacy OBS scenes.
It's just a single OBS Browser Source, that's it.
Thanks to teklynk/twitch_clips_player we can use Twitch Clips! Thank you 🤍
OBS Clip Player Overlay Configurator
NEW easily configure your ideal overlay with this handy-dandy configurator.
Default Layout
Features
With some simple changes to the URL of the browser source, you have the options to:
- Show/Hide Twitch Clips Player
- Show/Hide Live Chat
- Show/Hide textbox on bottom of the page
- Change text in the textbox
- Show/Hide background
- Easy to embed in your OBS as a Browser Source
Follow the Planned Features.
How to use?
Download the code and extract the .zip file to a location on your computer.
Browse to the folder that you just extracted from the .zip file and open soon.html in your web browser by double-clicking on the file.
Not much will show up just yet, but we're going to change that! Please read on to find out how it works.
How to show the Twitch Clips Player
Change the URL in your browser overlay from soon.html to soon.html?channel=YourTwitchName, replacing
YourTwitchName with your actual Twitch username.
How to hide the live chat box
Add to the end of the browser overlay URL: &chat=0
How to hide the textbox
Add to the end of the browser overlay URL: &textbox=0
How to hide the background
Add to the end of the browser overlay URL: &background=0
(this will show up with a transparent background in OBS, but probably a white background in your browser)
How to change text in the textbox
Add to the end of the browser overlay URL: &text=Any custom text here
How to hide the clips player, but keep the live chat
Add to the end of the browser over URL: &clips=0 and remove &chat=0 from your URL.
How to show just the textbox
Hide everything else, like so: &chat=0&background=0&clips=0&logo=0
How to show just the live chat
Add your streamer name, hide everything except chat, like so: soon.html?channel=xqc&background=0&clips=0&textbox=0
How to add to OBS
Add a new Browser Source to your OBS. Keep "Local file" unchecked and paste in the link directly as you see it in your webbrowser, for example:
https://jasperfrontend.github.io/soon.html?channel=xqc&chat=0
Set the dimensions of the browser source to 1920 width and 1080 height.