# UIIframeElement

***

Represents an iframe element in a panel.

The height of the iframe can be set by using the `height` property either as a number (measured in pixels) or a string (e.g. “100px” or “50%“).

By default, the height is calculated following a 16:9 ratio.

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-0e3fe0817901e6cbbe4b0bd9d8fb5e6946d713e6%2Fiframe-basic.png?alt=media" alt="Iframe showing an example website"><figcaption><p>Iframe with default height (16:9)</p></figcaption></figure>

```typescript
{ type: "Iframe", url: "https://www.example.com" }
```

<figure><img src="https://1346268847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0eksRydsZ8lvtEIxgbY5%2Fuploads%2Fgit-blob-eefda96842b659f6c22c7e36525ce12252587acd%2Fiframe-custom-height.png?alt=media" alt="Iframe showing an example website with a custom height"><figcaption><p>Iframe with custom height</p></figcaption></figure>

```typescript
{ type: "Iframe", url: "https://www.example.com", height: 300 }
```

## Properties

### type

> **type**: `"Iframe"`

***

### url

> **url**: `string`

The URL of the iframe.

***

### id

> **id**: `string`

The ID of the element.

***

### height?

> `optional` **height**: `string` | `number`

The height of the iframe.

If not provided, the height will be automatically calculated following a 16:9 ratio.

***

### onCreate()?

> `optional` **onCreate**: (`args`: { `id`: `string`; }) => `void`

A function to call when the element is created.

#### Parameters

| Parameter | Type                | Description                           |
| --------- | ------------------- | ------------------------------------- |
| `args`    | { `id`: `string`; } | The arguments passed to the function. |
| `args.id` | `string`            | The id of the element.                |

#### Returns

`void`

***

### onDestroy()?

> `optional` **onDestroy**: (`args`: { `id`: `string`; }) => `void`

A function to call when the element is destroyed.

#### Parameters

| Parameter | Type                | Description                           |
| --------- | ------------------- | ------------------------------------- |
| `args`    | { `id`: `string`; } | The arguments passed to the function. |
| `args.id` | `string`            | The id of the element.                |

#### Returns

`void`