Iframe Element

What is the Iframe Element?

Iframe element embedding a live leaderboard
Iframe element embedding a live leadboard from trickleupeconomics.org

The Iframe element embeds live websites and web content directly in your output. You can display dashboards, social media feeds, live data, or any web page alongside your timer and other elements.

The iframe element loads and displays the website in real-time, allowing you to incorporate dynamic web content without leaving your Stagetimer output. The website continues to update and function as it normally would in a browser.

How It Works

Embedding a website is straightforward:

  1. Enter the website URL (must start with http:// or https://)
  2. Configure scale if you want to zoom the website in or out
  3. Set refresh interval if you need the page to reload periodically
  4. The website loads and displays in your output

The website appears exactly as it would in a regular browser, with all its interactivity and live updates. You can embed dashboards, monitoring tools, social feeds, or any web content that updates automatically.

Element Settings

URL Configuration

Enter the full URL of the website you want to embed:

Iframe element with a valid full URL
Iframe element with a valid, full URL

URL requirements:

  • Must start with http:// or https://
  • Must be a complete URL (e.g., https://example.com)
  • Some websites prevent embedding (see Limitations below)

Valid examples:

  • https://example.com
  • https://dashboard.example.com/live
  • http://192.168.1.100:8080 (local network)

Invalid examples:

  • example.com (missing protocol)
  • www.example.com (missing protocol)
  • Just a domain without http:// or https://

Scale Options

Control the zoom level of the embedded website:

Iframe at 100% scale showing normal size
100% scale (normal)
Iframe at 50% scale showing more content
50% scale (zoomed out)

Available scale percentages:

  • 200% - Zooms in, showing 1/4 of the page
  • 150% - Moderate zoom in
  • 100% (Normal) - Standard size (default)
  • 75% - Moderate zoom out
  • 50% - Zooms out to show more content
  • 33% - Significant zoom out
  • 25% - Maximum zoom out

When to use scaling:

  • Zoom in (150-200%): Make text larger when website has small fonts
  • Zoom out (25-75%): Fit more content in the available space
  • Normal (100%): Website displays at intended size

Scaling is particularly useful for dashboards or websites that aren’t optimized for your output size. You can zoom out to see an entire dashboard or zoom in to focus on specific metrics.

Refresh Interval

Automatically reload the website at regular intervals:

Available intervals:

  • Never (Recommended) - Website loads once and updates naturally (default)
  • Every 1 minute - Refreshes every 60 seconds
  • Every 5 minutes - Refreshes every 5 minutes
  • Every 20 minutes - Refreshes every 20 minutes

⚠️ Warning: Auto-refresh performs a full page reload and may be disruptive during live shows. Use with caution.

When to use refresh:

  • Websites that don’t update automatically
  • Content that needs periodic reloading
  • Dashboards with poor auto-update behavior

When NOT to use refresh:

  • During live presentations (disruptive)
  • Websites that auto-update correctly
  • Interactive content that users might be viewing
  • Video or audio content (will restart)

Limitations and Troubleshooting

Website Embedding Restrictions

Some websites prevent embedding in iframes for security reasons. Common sites that block embedding:

Known blocked sites:

  • YouTube, Twitter/X, Facebook, Instagram
  • LinkedIn, GitHub
  • Google services (except specific embeddable widgets)
  • Banking and financial sites
  • Many major social media platforms

If you see an error:

  • “Site can’t be reached” - Check your URL and network connection
  • “Refused to connect” - The website blocks embedding
  • Blank screen - The website may use JavaScript that prevents iframe display
Error message displayed when a website blocks iframe embedding
Error shown when a website blocks embedding

Alternative Solutions

If a website blocks embedding:

  1. Check for embed options: Some services provide special embed URLs
  2. Screenshot tools: Capture and display as an image instead
  3. Browser source in OBS: Use OBS browser sources for more flexibility

Performance Considerations

  • Complex websites may load slowly
  • Video-heavy sites consume bandwidth
  • JavaScript-heavy pages may affect performance
  • Multiple iframes in one output multiply these effects

Common Use Cases

Live dashboards:

  • Analytics dashboards (Grafana, custom dashboards)
  • Social media aggregators (if they allow embedding)
  • Sales or metrics displays

Data visualization:

  • Live charts and graphs
  • Real-time data feeds
  • Weather displays
  • Stock tickers

Event content:

  • Event registration numbers
  • Live polling results (if embeddable)
  • Donation trackers
  • Attendee counters

Information displays:

  • Public transit schedules
  • News feeds (if embeddable)
  • Calendar views
  • Directory information