Skip to main content

Adding Overlays to OBS Studio

sk1ll
Updated

Creator_Tools.png

One of the most important and creative things new streamers like to bring into their stream, is the unique additon of overlays. StreamElements offers both static and animated overlays for you to utilize for your stream. In this article we will show you how you can add any StreamElements overlay into an OBS scene.

Getting the Overlay

The first thing you will need to do is grab the overlay that you want to insert into OBS by copying the overlay URL. 

You can do this a few different ways.

Option 1: From your dashboard

  1. Navigate to Streaming Tools > Overlays
  2. Find the overlay you want to use and click on the menu (the 3 dots in the bottom left of your selected overlay as shown below)
     
  3. Step 3: Click "Copy URL" 

Now you're ready to paste this URL into OBS, feel free to move down below, to the next section, if you're ready. 

Option 2: From the overlay editor

If you're already in your overlay editor, you can easily find the option to copy your URL so you can paste it into OBS.

Just hover over the link icon in the top right section of your overlay editor and click to copy to your clipboard. 

Now you're ready to paste this URL into OBS.

For the next step in this process you will need to move over to OBS. 

Adding the Overlay to OBS

  • Navigate to your Sources panel in OBS
  • Select the + button in the bottom left and choose Browser
  • Create a Browser source in OBS

    A new window will then appear prompting you to either create a new source or add an existing source.
  • Select "Create new" to add a new browser source and click 'OK'

    A new window will then appear prompting you to set up your browser source properties.
  • The following options should be set in order for the overlay to work correctly:
    • URL: Paste the overlay URL you obtained in the first step of this guide here.
    • Width: 1920, unless you've changed the browser source resolution yourself.
    • Height: 1080, unless you've changed the browser source resolution yourself.
    • FPS: 30 or 60 depending on your current stream settings and computer capabilities.
    • Custom CSS: Leave as default

 

FAQs

  • Q: Why are my overlays not appearing in OBS?
    A: This could be caused by wrong browser source dimensions, hardware acceleration, among other things. Refer to this article for additional troubleshooting steps.
  • Q: Can I move or resize overlays?
    A: Yes you can. You can either move and resize in the overlay editor or from the OBS preview window.
  • Q: Why do my overlays don't have sound?
    A: Please refer to this article to learn how to fix any sound issues with your overlays.

Related articles