Display Live Weather Feed in OBS Studio

Adding a live weather widget to your stream is a great way to personalize your broadcast, share your local conditions, and keep your audience engaged. This guide provides a straightforward, step-by-step walkthrough on how to display a real-time weather feed in OBS Studio using free, customizable browser-based widgets.

Step 1: Choose a Weather Widget Provider

To display live weather in OBS, you need a web-based widget that updates in real-time. Several free services allow you to generate customizable weather displays without requiring an account. Popular options include: * WeatherWidget.io: Highly customizable, clean design, and easy to use. * Indify.co: Great for minimalist, modern-looking widgets. * Bookwidgets: Offers interactive and simple layouts.

Step 2: Customize Your Weather Widget

Go to your chosen widget provider’s website and configure the settings to match your stream’s style: 1. Enter your target city or zip code in the location search bar. 2. Select your preferred measurement units (Imperial/Fahrenheit or Metric/Celsius). 3. Choose a layout style, such as a compact single-day icon or a detailed multi-day forecast. 4. Adjust the background color, font, and icon style. For a seamless look on stream, choose a transparent background if the widget provider supports it.

Step 3: Get the Widget URL

Once you are satisfied with the design, the website will generate the code. Look for the direct URL option.

If the site only provides an HTML embed code, copy the URL inside the src="..." attribute of the iframe code. This specific web address is what OBS Studio will use to pull the live feed.

Step 4: Add a Browser Source in OBS Studio

  1. Open OBS Studio on your computer.
  2. Go to the Sources dock at the bottom of the screen.
  3. Click the + (plus) icon to add a new source.
  4. Select Browser from the list.
  5. Name the source (e.g., “Live Weather Feed”) and click OK.

Step 5: Configure the Browser Source Settings

A properties window for your new Browser source will appear. Configure it with the following settings: * URL: Paste the widget URL you copied in Step 3 into this field. * Width & Height: Set the dimensions to match the size of your widget (for example, 400 width by 150 height for a banner, or 300 width by 300 height for a square). You can adjust these numbers until the widget fits perfectly without scrollbars. * Custom CSS: If you need to make the background transparent and the widget provider did not support it, you can try typing body { background-color: rgba(0, 0, 0, 0); margin: 0px; auto; overflow: hidden; } into this box. * Click OK to save the settings.

Step 6: Position and Crop the Widget on Your Stream

The weather feed will now appear on your OBS canvas. * Move: Click and drag the widget to your desired position on the screen. * Resize: Grab any of the red corners and drag them to scale the widget size. * Crop: If there are unwanted empty spaces or borders around the widget, hold the Alt key (Windows) or Option key (Mac) and drag the edges of the red bounding box to crop the source.