OBS Browser Source Not Working? How to Interact With Web Pages Inside OBS Studio

If you're using OBS Studio to display a website, YouTube page, dashboard, live poll, chat widget, or web application, you may notice something confusing:

The webpage appears perfectly inside OBS — but you can't click anything.

This is usually not a broken Browser Source.

The key is understanding how OBS handles browser interaction.

The Problem

A typical OBS Browser Source looks like this:

OBS Studio
┌──────────────────────────────────────┐
│                                      │
│        WEB PAGE / YOUTUBE            │
│                                      │
│       [ Button ]                     │
│                                      │
└──────────────────────────────────────┘

The page is rendered by OBS, but clicking directly on the OBS preview isn't how you interact with the webpage.

OBS's official documentation describes Browser Source as an embedded web browser that can display web pages, local files, widgets, alerts and other browser-based content.

The solution is Interact.

---

The Correct Way to Interact With a Browser Source

First select your Browser Source in the Sources panel.

Then either:

Method 1 — Interact button

Select the Browser Source and click:

Interact

Method 2 — Right-click

Right-click the Browser Source:

Browser
   ↓
Right Click
   ↓
Interact

OBS will open an interaction window where you can use the webpage.

This is the intended workflow for interacting with Browser Sources.

---

Your OBS Screenshot

In the screenshot you provided, the Browser Source is actually loading successfully.

You can see the webpage rendered inside the Browser Source, which means:

• Browser Source is working
• Chromium/CEF is rendering the page
• The URL is loading
• OBS is receiving the webpage

The issue is therefore likely interaction, rather than loading.

---

What About "Page Permissions"?

This is where things can become confusing.

Your screenshot shows:

Page permissions → Full access to OBS

It may look like this setting controls whether you can click the webpage.

It doesn't.

OBS documentation describes Page Permissions as controlling whether the browser page can access or modify OBS-related information.

In other words:

Page Permissions
        │
        └── Webpage ↔ OBS communication

Interact
        │
        └── You ↔ Webpage

These are two different things.

---

Your Custom CSS May Also Cause Problems

Your screenshot contains:

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

The important part is:

overflow: hidden;

This can prevent normal scrolling behavior.

OBS's default Browser Source CSS includes overflow: hidden, and OBS community discussions have specifically identified this as a reason scrolling can be problematic in Interact mode.

For troubleshooting, remove the CSS completely.

Go to:

Browser Source
→ Properties
→ Custom CSS

Delete:

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

Click OK.

Then:

Right-click Browser Source
→ Interact

Test scrolling and clicking again.

---

A Better CSS for Interactive Pages

If you need the page to remain transparent but still allow scrolling, try:

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0;
    overflow: auto;
}

body::-webkit-scrollbar {
    display: none;
}

This keeps the scrollbar visually hidden while retaining scrolling behavior.

This approach is also consistent with solutions discussed in OBS community threads around Browser Source scrolling.

---

Test With a Simple Website First

Before troubleshooting YouTube or another complicated website, use a simple page.

Set the Browser Source URL to:

https://example.com

Then:

Browser Source
      ↓
Right Click
      ↓
Interact

Try clicking.

If this works, your OBS Browser Source is functioning correctly.

The problem is likely specific to the website you're trying to load.

---

YouTube Can Be More Complicated

Your screenshot appears to show YouTube content.

YouTube pages contain a lot of dynamic content:

JavaScript
iframes
login state
advertisements
cookies
dynamic UI
embedded players

Therefore, a YouTube page inside OBS's embedded browser isn't necessarily equivalent to opening YouTube in Chrome.

If your objective is simply:

Show YouTube in OBS

you may be better off using a normal browser/window capture depending on the workflow.

If your objective is:

Interact with YouTube while capturing it

you may instead want:

Chrome / Edge
      ↓
Window Capture
      ↓
OBS

Then you interact with Chrome normally.

---

Browser Source vs Window Capture

This distinction is important.

Feature	Browser Source	Window Capture
Display website	✅	✅
Interactive webpage	✅ Via Interact	✅ Normally
Scroll webpage	✅ Interact mode	✅
JavaScript widgets	✅	✅
OBS webpage overlays	⭐ Excellent	⚠️
YouTube browsing	⚠️	⭐
Web dashboards	⭐	⭐
Custom HTML	⭐⭐⭐	⭐
OBS-controlled webpage	⭐⭐⭐	❌
Capture normal Chrome	❌	✅

OBS itself recommends Browser Source for web-based content such as widgets and alerts, while Window Capture is intended to capture a specific application window.

---

If You Want a Webpage to Control OBS

This is a completely different and much more powerful use case.

For example, you could build your own control panel:

┌──────────────────────────────────────┐
│         MY OBS CONTROL PANEL                                                     │
├──────────────────────────────────────┤
│                                                                                                                      
│  [ START RECORDING ]                 │
│                                      │
│  [ STOP RECORDING ]                  │
│                                      │
│  [ INTRO SCENE ]                     │
│                                      │
│  [ NEWS SCENE ]                      │
│                                      │
│  [ END SCENE ]                       │
│                                      │
└──────────────────────────────────────┘

Then:

Browser Source
      ↓
JavaScript
      ↓
OBS WebSocket/API
      ↓
OBS Studio

In this scenario, Page Permissions becomes relevant because the webpage may need to communicate with OBS.

That's different from simply clicking a webpage.

---

Recommended Troubleshooting Sequence

If your Browser Source isn't responding:

1. Select Browser Source

Sources
→ Browser

2. Right-click

Interact

3. Test mouse

Try clicking a simple button.

4. Test keyboard

Click a text field and type.

5. Test scrolling

Use the mouse wheel.

6. Remove Custom CSS

Temporarily leave it completely blank.

7. Test example.com

If that works, test your actual website.

8. Test another browser source

This helps determine whether the problem is OBS or the website.

---

The Most Important Point

Your Browser Source doesn't need:

Page permissions → Full access to OBS

just to make the webpage clickable.

The basic workflow is:

Add Browser Source
       ↓
Enter URL
       ↓
Page loads
       ↓
Select Browser Source
       ↓
Right-click
       ↓
INTERACT
       ↓
Click / Type / Scroll

If you're using the exact setup shown in your screenshot, I would first remove the Custom CSS and then test the page through Interact. Your overflow: hidden rule is particularly worth checking if scrolling is the specific problem.

Useful official references

OBS Browser Source documentation

OBS Sources Guide

OBS Help Portal

#OBSStudio, #OBS, #BrowserSource, #OBSBrowserSource, #OBSInteract, #Streaming, #LiveStreaming, #YouTubeStreaming, #OBSStudioTutorial, #OBSHelp, #ContentCreation, #StreamSetup, #StreamingTips, #OBSWebSource, #LiveProduction