How To Make OBS Widgets With Dynamic Data With Just HTML (Source Provided)

Channel:
United Kingdom Grofit
Subscribers:
70
Published on ● Video Link: https://www.youtube.com/watch?v=iGnFVSf2aiU


Category:
Tutorial
Duration: 18:57
5,635 views
96

In this tutorial we will make FROM SCRATCH 2 simple widgets, one which slides in a twitter handle (could show any text) and a widget that will display any meme from a gif file with a custom title that is completely configurable and reusable in OBS, all with just a local HTML file.

This is based upon something I setup on my own stream once I realised OBS could just let you put in browser sources (html pages) and it would layer it on top as its own source. This is pretty much all custom overlays are, just fancy html pages with some dynamic functionality built in, however you can easily just make your own ones from scratch without much effort.

It helps to know Html, Css, Javascript but if you don't then no need to worry as all the source is provided with this tutorial so you can use that as a basis and tweak it as much as you want.

Here are the links for resources used in this tutorial:

Widget Gist (Source Code) - https://gist.github.com/grofit/82e2ded64c2b5215bc08e78a716e7abc
Antonio Meme - https://i.kym-cdn.com/photos/images/newsfeed/000/640/962/d91.gif
Michael Scott Meme - https://media.tenor.com/images/c0218ba95d28a74e05935bb4ae74ad34/tenor.gif

Intro 0:00
Preview Of Widgets 1:45
Making The Twitter Handle Widget 2:02
Adding Twitter Handle Widget To OBS 5:18
Making The Meme Widget 7:35
Adding Default Meme Widget To OBS 11:23
Adding Customized Meme Widget To OBS 13:38
Waffle & Other Tutorial Info 17:36



Other Videos By Grofit


2021-02-16Slay The Spire - The Watcher Runs - Part 4 - POSSIBLY MY BEST 1ST ACT... Until I die...
2021-02-16Resident Evil 7 - Co-hosting ISaL's Playthough - Part 2
2021-02-16Earth Defense Force 4.1 - Coop Playthrough - With The Boys - Part 3
2021-02-16Earth Defense Force 4.1 - Coop Playthrough - With The Boys - Part 2
2021-02-10Heroes of Hammerwatch - Live Coop Playthrough With The Boys - Part 11
2021-02-10Heroes of Hammerwatch - Live Coop Playthrough With The Boys - Part 10
2021-02-10How To Trigger OBS Sources From Twitch Chat With Touch Portal (Without Global Events)
2021-02-07Heroes of Hammerwatch - Highlight - The Onsen & Umeboshi Story
2021-02-07Heroes of Hammerwatch - Live Coop Playthrough With The Boys - Part 9 / Game Completed
2021-02-06Earth Defense Force 4.1 - Coop Playthrough - With The Boys - Part 1
2021-02-03How To Make OBS Widgets With Dynamic Data With Just HTML (Source Provided)
2021-02-01How To Add Reaper VST EQ To OBS And Check Your Audio Levels In Real Time
2021-02-01Slay The Spire - The Watcher Runs - Live Streamed - Part 2
2021-01-31Slay The Spire - The Watcher Runs - Live Streamed - Part 1
2021-01-30Satisfactory - Live Coop Disaster - With The Boys - Part 1
2021-01-30Risk Of Rain 2 - Live Coop Playthrough - With The Boys - Part 3
2021-01-30Risk Of Rain 2 - Live Coop Playthrough - With The Boys - Part 2
2021-01-30Risk Of Rain 2 - Live Coop Playthrough - With The Boys - Part 1
2021-01-29Devour - That Was Over Quick - With The Boys
2021-01-28Star Wars Jedi Fallen Order - Live Playthrough - Part 2
2021-01-28Devour - First Time Playing - With The Boys


Tags:
how to
obs
widgets
html
dynamic
data
browser source
grofit
tutorial
component
javascript