Skip to content

Instantly share code, notes, and snippets.

Last active April 25, 2024 12:24
Show Gist options
  • Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.
Save sam0737/a0ee8ca253fc5c84b2aa2ac018f7b8ad to your computer and use it in GitHub Desktop.
OBS Studio: A HTML page for showing current date and time in the video
<!DOCTYPE html>
<meta charset="UTF-8">
<title>A simple clock</title>
<body translate="no" >
<div id="output"></div>
<script src=''></script>
var urlParams;
(function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query =;
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
var output = document.getElementById("output");
if (urlParams["style"]) output.setAttribute("style", urlParams["style"]);
if (urlParams["bodyStyle"]) document.body.setAttribute("style", urlParams["bodyStyle"]);
var c;
c = function() {
output.innerText = moment().format(urlParams["format"] || '');
}, 1000);
Copy link

I ended up pasting the URL from SJP176 plut the old text formatting. Otherwise I get the YY-MM-DDTHH:MM:SS-04:00 format. bold 30px monospace; color: blue; display: inline-block; border-radius: 5px; padding: 2px 5px;&format=YYYY-MM-DD HH:mm:ss

Working pretty well now. Thanks.

Copy link


Copy link

The-Gig commented Nov 23, 2021

Lol, before noticing these comments, I found a partial workaround: using OBS "browser" plugin "custom CSS" field to set the font size and color (e.g. body { background-color: rgba(0, 0, 0, 0.5); margin: 0px 5px; overflow: hidden; font-size: 50px; color: lightgray }), although I was not able to change the time format that way (so it was still YYYY-MM-DD etc.).
Learning that just replacing "" with "" in the original URLs fixed them has been a relief! Thank you @SJP176 !

Wondering if something would be broken (as it looks like the URLs may refer to specific github commits?) in case @sam0737 updates the instruction page with the new URLs... [UPDATE: Probably not... the instructions are just in a comment. So, unless github prevents from editing older posts, he should be able to update the instructions without breaking anything at all!]

Copy link

Rawgit URL is dead now, it's no longer accessible, so you have to use a different URL to get the clock.

Copy link

Copy link

LHY51 commented Oct 21, 2023

I want it to display fractional seconds, but, I can't get it to work. Is there any way to have an refresh rate or auto-update function?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment