Show API reference for

st.iframe

Embed content in an iframe.

st.iframe embeds external URLs, HTML content, or local files in an iframe. It auto-detects the input type and handles it appropriately.

Function signature[source]

st.iframe(src, *, width="stretch", height="content", tab_index=None)

Parameters

src (str or Path)

The content to embed. This can be one of the following:

  • Absolute URL: A URL starting with http://, https://, or data:. The URL is loaded directly in the iframe.
  • Relative URL: A path starting with /, such as /app/static/report.html. Useful for referencing files served via Streamlit's static file serving.
  • Local file path: A path to a local file, either as a string or Path object. HTML files (.html, .htm, .xhtml) are read and embedded directly. Other files (PDF, images, SVG, etc.) are uploaded to Streamlit's media storage and rendered using the browser's native viewer.
  • HTML string: If src doesn't match any of the above patterns, it's treated as raw HTML and embedded directly in the iframe.

width (int, "stretch", or "content")

The width of the iframe. This can be one of the following:

  • "stretch" (default): The iframe fills the width of its container.
  • "content": The iframe matches the width of its content.
  • An int: A fixed width in CSS pixels.

height (int, "stretch", or "content")

The height of the iframe. This can be one of the following:

  • "content" (default): The iframe automatically sizes to match its content height. For HTML strings and local HTML files, Streamlit measures the content height. For external URLs and non-HTML files, this falls back to 400px due to cross-origin restrictions.
  • "stretch": The iframe fills the available vertical space. Works best inside containers with defined heights.
  • An int: A fixed height in CSS pixels.

tab_index (int or None)

Controls keyboard navigation focus. This can be one of the following:

  • None (default): Browser default behavior.
  • -1: Removes from tab order but allows programmatic focus.
  • 0: Adds to tab order in document position.
  • Positive int: Adds to tab order at specified priority.

For more information, see the tabindex documentation on MDN.

Examples

Embed an external website:

import streamlit as st
st.iframe("https://docs.streamlit.io", height=600)

Embed HTML content directly:

import streamlit as st
st.iframe(
    '''
    <style>body { font-family: sans-serif; padding: 1rem; }</style>
    <p>This is <strong>embedded HTML</strong>.</p>
    ''',
    height=100,
)

Embed a local HTML file:

import streamlit as st
from pathlib import Path
st.iframe(Path("reports/dashboard.html"), height=800)
arrow_backPrevious: st.htmlarrow_forwardNext: Data elements
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.