# Advanced \<iframe> element 🖥

## 🔗 Links

> [Demo](https://digitaleyedemo.bubbleapps.io/iframe) | [Editor](https://bubble.io/page?type=page\&name=iframe\&id=digitaleyedemo\&tab=tabs-1)

> [Demo2 (Fullscreen mode)](https://digitaleyedemo.bubbleapps.io/iframe-fullscreen) | [Editor](https://bubble.io/page?type=page\&name=iframe-fullscreen\&id=digitaleyedemo\&tab=tabs-1)

> [Plugin page](https://bubble.io/plugin/advanced-iframe--embed-website-1618182996826x149444463168323600)

> [Forum](https://forum.bubble.io/t/plugin-advanced-iframe-embed-website/146134)

## ℹ️ Introduction

Probably the most advanced but very simple to use `<iframe>` plugin for Bubble. An `<iframe>` element allows to "embed" an external website to the Bubble app. &#x20;

Please note that some websites disable the ability to be shown in an iframe on an external website. As a quick example, you can't render google.com in your iframe.

## 🔥 Features

* Change the url dynamically without page reloads
* YouTube mode to embed URL of a YouTube video
* Set iframe's width/height dynamically
* Scroll bar control (show / hide)
* iframe's "sandbox" attribute control to securelly embed external pages (`allow-downloads`, `allow-popups`, `allow-same-origin` etc). Recommended for advanced users
* Setting `title`, `id`, `class` attributes
* Plugin fires events (when URL is invalid) so you can add custom error handling

## 📚 Documentation

Install the plugin, add an "iframe" element on your page, provide a URL and you should be able to see the external page embedded into your app!

For an advanced usage see below.

![](/files/-MYjUD9fKs6CiZMyBEzW)

### Fields

**General settings**

| Option     | Type     | Description |
| ---------- | -------- | ----------- |
| URL        | String   |             |
| Scrolling  | Dropdown |             |
| Fullscreen | Checkbox |             |

**Sandbox options**

Sandbox attribute applies extra restrictions to the content in the frame.&#x20;

More info: <https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe>

| Option                         | Type   | Description                                                                                                                                                                                                              |
| ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| allow-same-origin              | Yes/No | If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).             |
| allow-downloads                | Yes/No | Allows for downloads to occur with a gesture from the user.                                                                                                                                                              |
| allow-forms                    | Yes/No | Allows the resource to submit forms. If this keyword is not used, form submission is blocked.                                                                                                                            |
| allow-modals                   | Yes/No | Lets the resource open modal windows.                                                                                                                                                                                    |
| allow-popups                   | Yes/No | Allows popups (such as window\.open(), target="\_blank", or showModalDialog()). If this keyword is not used, the popup will silently fail to open.                                                                       |
| allow-popups-to-escape-sandbox | Yes/No | Lets the sandboxed document open new windows without those windows inheriting the sandboxing. For example, this can safely sandbox an advertisement without forcing the same restrictions upon the page the ad links to. |
| allow-scripts                  | Yes/No | Lets the resource run scripts (but not create popup windows).                                                                                                                                                            |
| allow-top-navigation           | Yes/No | Lets the resource navigate the top-level browsing context (the one named \_top).                                                                                                                                         |

**Advanced settings**

| Option             | Type     | Description                                                                                                                                                                                   |
| ------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Title              | String   | People navigating with assistive technology such as a screen reader can use the title attribute on an  to label its content. The title's value should concisely describe the embedded content |
| ID                 | String   | Add an ID attribute to the iframe                                                                                                                                                             |
| Class              | String   | Space-separated iframe classes. Example: "myclass1 myclass2"                                                                                                                                  |
| Do not show alerts | Checkbox | Remove the default plugin alert popups (when the provided URL is not correct)                                                                                                                 |
| YouTube URL        | Checkbox | Choose this option if your URL is a YouTube video. This will automatically add some YouTube-specific attributes                                                                               |

### Events

* "**Incorrect URL**" event: fires when the provided URL is not correct. In combination with the "Do not show alerts" field it allows you to build a custom error handling (show an error message in a different language etc)!

### Actions

* **Update URL**

![](/files/-M_RBVjTm11M4Kd_rdql)

* **Set Scroll**

![](/files/-M_RBK0ETGDDC2tHVwbo)

* **Set Size**

![](/files/-M_RB8ZWsT_ertsiJStS)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bubble.digital-bird.com/plugins/iframe.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.