Skip to main content
Closed Captions Browser Output

Set Up the Closed Captions Browser Source

Create a transparent caption layer for OBS, browser-source inputs, switchers, and compositors.

Written By 4ALL.LIVE

Last updated 4 months ago

Create a transparent caption layer for OBS, browser-source inputs, switchers, and compositors.

Best for: Event producers, display operators, accessibility leads, broadcast/AV engineers, web teams, and authorized remote operators.

Before you start

Availability depends on event access, plan entitlements, destination enablement, language configuration, and supported browser/display/network behavior.

  • Use the correct event and final source/target language configuration.
  • Know the physical or web destination, resolution, audience, privacy level, and monitoring owner.
  • Test the final receiving screen, embed, graphics path, or operator device—not only the setup preview.

Step by step

  1. Enable Closed Captions. Confirm plan entitlement and event destination.
  2. Open Share/Outputs. Copy the Closed Captions URL, not the viewer or Program link.
  3. Choose language. Use event/default or supported destination parameter.
  4. Configure style. Set font, size, line count, position, speaker display, background/alpha, and safe margins.
  5. Add browser source. Enter the approved URL in OBS/production system with target width/height.
  6. Configure transparency. Ensure the source and compositor preserve alpha; avoid an unintended opaque page.
  7. Set refresh/reconnect policy. Do not refresh on every scene activation if it causes caption loss unless tested.
  8. Test final program. Speak a known phrase and inspect key/fill/composite and record return.

What success looks like: The intended audience or operator receives the correct event, language, styling, and control level with a documented reconnect and fallback path.

Check your setup

  • The caption layer appears at the correct resolution/position with transparent background and updates continuously.

Troubleshooting

Opaque rectangle

Check destination style, browser-source transparency, CSS/color/alpha, and compositor.

No captions

Check event live state, destination enabled, language, source network, and URL.

Wrong scale/crop

Match browser-source canvas to program resolution and safe areas.

Security and operational notes

  • Treat output URLs according to event access policy.
  • Never expose an authenticated dashboard in OBS.
  • Use a downstream return monitor.

Was this helpful?

Still need help? Ask the team