Adding Scroll News Text Overlay to Video Live Stream – YoutubeLive / OBS

Adding Scroll News Text Overlay to Video Live Stream – YoutubeLive / OBS

Scenario : To add dynamic text to live stream video using simple web server.

Challenges : Easy to Update , Super Speed , High Server hits so data access should be from local machine.

Features : Very Simple, Tiny Web server used. Text can be updated using Notepad.

Steps : PART A Setting up the server

  1. Download Tiny Web server – Download from
  2. Extract the files to a folder . For Example : c:\tiny Make sure location of tiny.exe is c:\tiny\tiny.exe
  3. Create an text index.html file as it is required when you run the tiny server.
  4. Now run the server from command prompt using this command c:\tiny\tiny.exe “c:\tiny\tiny.exe”
  5. Now you may get an alert from firewall just click Yes.
  6. Now open your browser and type the ip address of your pc like or http://localhost
  7. If it works means you have successfully setup the tiny server.

Part B : Create templates for scroll News

Create an html file it will connect to a text file using ajax jquery. Sample code is below

Save below code as flashnews.html in c:\tiny

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Pragma" content="no-cache">
	  p {color: yellow;
        font-size: 25px; /* Font Size Change Here */
	  .sub {color: white;
        font-size: 30px; /* Font Size for scroll news change Here */
	table {
		padding: 20px; /* Border side blank space */
		width : 100%;
		height: 100%;
	  table td {
		padding: 15px;
		overflow: hidden;
		border: 1px solid; 
		text-align: center;
		text-overflow: ellipsis;
	<tr height="90%">
	<td colspan="5">
		<tr bgcolor="#280564" >
	<td width="20%"><p>Flash News :</p></td><td colspan="4">
<p><marquee><div class = "sub" id="name1"><h2>-</h2></div></marquee></p>
	<script src="//"></script>
	setInterval(ajax_query, 10000); /* Change time in seconds to refresh speed */

function ajax_query(){
    url: "flashnews.txt", /* File Name for Data */
    dataType: 'text',
    success: function(data) {
	var news = '';
	var ks = data.split("\n");
	jQuery.each( ks, function( i, val ) {
	news+='  * '+val; 

Open notepad and add few lines of news and save as flashnews.text and save in c:\tiny\ folder

Now open the browser and browse : localhost/flash.html

Now you can add this link as browser overlay in your OBS streaming software.

Issues you may face:

# Content not getting refreshed : 1. Try switching to incognito Mode.

# Server not responds well : try stopping the tiny web server and restart it. – Command in windows 10 : taskkill /F /IM tiny.exe

This is just a proof of concept. You can add as many templates like score card, timer etc and use this light weight server.

Future Development Tips

You can install tiny server in any android device or TV and use it as server. – Tiny Server for Android – Text editor to update the content

Make sure to use proper port number and also UTF 8 encoding.

Feel free to ask me if need more help.