Complete guide how to use OBS Browser Source

One of OBS's most adaptable sources is the browser source. It is basically a web browser that you can directly add and control from OBS. You can use this to carry out a variety of unique layout, image, video, and even audio operations. You can add directly to OBS anything that you can write to run in a standard browser.

By default, the browser source doesn't offer many options and is rather simple. The list of options is explained below.

  • Local File: Indicates to the source whether you are loading a web page locally or remotely.
  • Width: Sets the width of the browser page's viewport.
  • Height: Defines the browser page's viewport height.
  • FPS: Sets the frame rate at which the browser page will render.
  • CSS: By default, the background is made transparent, the body's margins are eliminated, and the scroll bar is hidden, this setting overrides the default CSS style from the selected resource/web page.
  • Shutdown source when not visible: when the source is no longer visible, unloads the page.
  • Refresh browser source when scene becomes active: The source is reloaded after the scene is started. This feature allows you to refresh the browser source without having to interact with it because it simply refreshes each time you switch scenes.
  • Refresh cache of current page: Clicking this will immediately refresh the page and reload any content.

Directly interacting with the browser source in OBS

OBS Browser Source provides an interaction window so you can easily control the source just like you would navigate in any other browser. Simply right-clicking on the browser source and choosing interact, as shown in the image below, will launch the interaction window.

Adding a browser source full guide with images

  • Step 1. I'll utilize one of StreamCD's static text widgets for this demonstration. Copy the URL you want to use, then launch OBS studio, see attachment 1
  • Step 2. Once opened, navigate to Sources and click on the (plus icon) and select Browser, name your new source and hit OK, see attachment 2
  • Step 3. Uncheck Local file, then enter the URL in the appropriate input since we are using an external URL rather than a local one. I often utilize the screen resolution for width and height and update the view in the preview window, see attachment 3. You can experiment with the other settings, but for the purposes of this lesson we've done enough; click "OK" to continue and let's look at some resizing tips.

OBS browser source resizing

Tips and tricks to resize any type of source in OBS Studio

In OBS Studio, there are numerous options for resizing source windows, but I'll only concentrate on the two that involve dragging the corners of the preview window. As you are probably aware, you can drag and resize the view when a source is selected. What you might not know is that you can manage the space on your preview window without shrinking the content of your source by holding the ALT key and dragging to crop the source view based on the viewport width and height.


80 article views
#browser source #obs #guide #tutorial