> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/help/ja/llms.txt)

# iframe

An **`iframe`** is an HTML element that allows you to embed one HTML page into another HTML page. They are commonly used for embedding maps, videos, social media, and other elements in websites.

While an `iframe` tag has many attributes for formatting the element, it must contain a `src` with a path to the embedded HTML file. This example also specifies a `width` and `height` for the element.

```html
<iframe
  src="/path/to/your/file.html"
  width="100%"
  height="400px"
  title="My file"
></iframe>
```

## Request an `iframe` in Mapbox Studio

You can use [Mapbox Studio](https://docs.mapbox.com/studio-manual/) to request an `iframe` to embed in a webpage that contains a map that uses your Mapbox-hosted style.

![Share sheet in Studio with iframe embed](https://docs.mapbox.com/help/ja/assets/ideal-img/iframe.5acba89.480.png)

Before embedding an `iframe` into your HTML page, it is important to understand the limitations of an `iframe` and when to instead use [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) or another Mapbox product:

**`iframe` does support:**

-   Displaying a Mapbox-hosted style on an HTML page
-   Pan, zoom, and tilt
-   Showing users a default map location
-   Search

**`iframe` does not support:**

-   Feature interactions such as popups and click events
-   Access to additional Mapbox products
-   Programmatic access to [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/) APIs
-   The [oEmbed](https://oembed.com/) standard, required for embedding on certain blogs

The example below demonstrates `iframe` HTML from Mapbox Studio:

```html
<iframe
  width="100%"
  height="400px"
  src="https://api.mapbox.com/styles/v1/mapbox/streets-v12.html?title=false&zoomwheel=false&access_token=YOUR_MAPBOX_ACCESS_TOKEN"
  title="Streets"
  style="border:none;"
></iframe>
```

## Accessibility

Users with limited connectivity, screen readers, or other assistive devices use the `title` field of an `iframe` to add context to your map.

By default in Mapbox Studio, this value is the name of your style. Make sure the title is informative to users before embedding.

## Add an `iframe` to a website builder

If you do not have direct access to your website's HTML page, you may be using a website builder such as Squarespace or Shopify.

Mapbox does not officially support integration with these platforms, but `iframe` functionality is a web standard and most website builders offer support through a **Code Block**, **HTML Block**, **HTML Editor**, or similar interfaces.

Linked below are external resources to provide `iframe` integration for Squarespace and Shopify. If you have any questions about these resources, contact either Squarespace or Shopify support.

-   [`iframe` in Squarespace](https://support.squarespace.com/hc/en-us/articles/206543167-Code-Blocks)
-   [`iframe` in Shopify](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/rich-text-editor#add-html-content-with-the-rich-text-editor)

**Related resources:**

-   [`iframe` documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)
-   [Styles API documentation](https://docs.mapbox.com/api/maps/#request-embeddable-html)