Web Overlays in Live Studio: overlays.uno, StreamElements and Other Overlay Tools

Put any public web page on your stream as a live overlay: tickers and graphics from overlays.uno, alerts and widgets from StreamElements or Streamlabs, counters and clocks. They update on air as they change, over a live show or a 24/7 playlist, with no OBS.

emin
··5 min read

What a Web Overlay Is

A web overlay puts a web page on top of your scene, the way a browser source does in OBS. Overlay tools such as overlays.uno, StreamElements and Streamlabs give you a link to an "output" or "overlay" page made for exactly this. Paste that link into Live Studio and the page appears on your stream.

The page keeps running while you're live, so anything that changes in it changes on air: a ticker scrolls, a score updates, an alert pops up. It's rendered in our cloud along with the rest of the scene, so there's no OBS to keep open and no computer that has to stay on.

Web overlays work on every plan and cost nothing extra.

Add a Web Overlay

  1. Open your stream's Studio tab. If Live Studio isn't on yet, press Enable Live Studio.

  2. In the sidebar, open Look and find Web Overlay.

  3. Paste the page's link, for example your overlays.uno Output URL, and press Add.

  4. The overlay appears in the top left of the canvas at 40% size. Drag and resize it into place.

Most overlay tools design their output for a full 1920 × 1080 frame and leave the rest of the page transparent. For those, stretch the web overlay to cover the whole canvas: their graphics then land exactly where you placed them in the tool, and your scene shows through everywhere else.

You can add as many web overlays as you like, one link each. They all start in the same spot, so move each one after you add it. One overlays.uno output can also carry several graphics at once, which is often easier than one overlay per ticker.

Over a 24/7 Playlist

Overlay templates can't take a web page: a template is applied to each video ahead of time, so what it shows is fixed for that video. Anything live belongs in Live Studio. You can still keep your playlist running underneath:

  • Turn on Live Studio for your Live Channel. Your playlist shows up in the studio as the Playlist Output source, in every scene.

  • Put the playlist full screen in a scene and add your web overlays on top.

  • Put the studio on air instead of the plain playlist. See Switching Between Live Channel and Live Studio Mid-Stream.

The studio then runs in the cloud with your playlist and overlays, and goes to every destination of the stream, custom RTMP included. On paid plans there's no time limit on it.

A web overlay can show any public website over https or http. Some things it won't do:

  • Local and internal addresses are refused: localhost, private IP ranges and names on your own network. The overlay is rendered on our servers, not on your computer, so it couldn't reach them anyway.

  • Playout's own pages and files (playout.video and its subdomains) are refused. To show a picture or video from your library, add it as an image or video in Look.

  • Pages that need you to sign in show their signed-out version. On air the page loads with no cookies or saved login. Use the tool's public output or overlay link, not its editor.

  • Pages that block being embedded stay blank. Some sites tell browsers not to show them inside another page. Overlay tools don't, because being embedded is what their output links are for.

  • Clicks don't reach the page. It's on screen for your viewers, not something you operate from the canvas. Control it from the overlay tool itself, as you would with OBS.

Tips

  • Test the link first. Open it in a private browser window. What you see there, with a transparent background, is what goes on air.

  • Keep the count sensible. Each web overlay is a live page running beside your stream. A few is fine; before you put a dozen on one scene, run the stream for a day as a test.

  • Change the content in the tool. Edits in overlays.uno or StreamElements reach the stream by themselves. You don't need to touch the studio during the show.

Common Questions

Do I need OBS or a computer that stays on? No. The page is rendered in our cloud with the rest of the scene.

Does it work on the Free plan? Yes. Free streams still stop after 2 hours and carry the watermark, as usual.

Can I use a web overlay in an overlay template or a composition? No. Templates and compositions are prepared with each video ahead of time, so they can't show a page that changes. Use Live Studio.

Can Playout read my RSS feed or a spreadsheet directly? On Business, Playout's own graphics can read a published Google Sheet, which can pull in an RSS feed. See Show a Google Sheet or Market Feed on Your Stream. If your overlay tool can show the feed, a web overlay does the same on any plan.

My overlay is blank. Check the link opens in a private window, that it's the public output link, and that it isn't a local address. If the page needs a login, it can't show on air.

Next Steps

Related Articles

We use cookies

We use cookies to ensure you get the best experience on our website. For more information on how we use cookies, please see our policy.

By clicking "Accept", you agree to our use of cookies.
Learn more.