# Attributes

Iframe provide attributes to make iframe attractive by using thats attributs we can explore 

more about iframe 

iframe provide different types of attributes to make iframe example:

| Attributes  | Description LInk                       |
| ----------- | -------------------------------------- |
| Height      | [#height](#height "mention")           |
| `Width`     | [#width](#width "mention")             |
| SandBox     | [#sandbox](#sandbox "mention")         |
| FrameBorder | [#frameborder](#frameborder "mention") |
| src         | [#src](#src "mention")                 |

## Height

height attribute used for set height of iframe. we provide higth to iframe in pixels.

**Note:**

you can provide height also in (%)percentage but you will get issue with (%)percentage iframe height not work with (%)percentage 

we suggest to use height with pixels

**syntax:**

\<iframe height="100px">\</iframe>

**example:**

`<iframe src="https://xyz.com" height="100px"></iframe>`

## `Width`

Width attribute is used to set the width of iframe. You can provide width to iframe in pixels or percentage(%).&#x20;

**syntax:**

without percentage

\<iframe width="100px" heigth="100px">\</iframe>

with percentage

\<iframe width="100%" heigth="100px">\</iframe>

**example:**

`<iframe src="https://xyz.com" width="100px" heigth="100px"></iframe>`

## `SandBox`

The sandbox attribute enables an extra set of restrictions for the content in the iframe. When the sandbox attribute is present, and it will: treat the content as being from a unique origin. block form submission. block script execution.

sometime we get error while submitting form also get error regarding javascript we get this error because iframe by default apply restriction for iframe to avoid this kind of error we use sandbox attribute to remove restriction

sandbox provide different values for restrictions example:&#x20;

allow-forms Allows form submission

allow-same-origin Allows the iframe content to be treated as being from the same origin&#x20;

allow-script Allows to run scripts

**syntax:**

\<iframe sandbox=" ">\</iframe>

**description:**

&#x20;here sandbox empty value means its allow all restrictions in iframe ex:- its restrict form submission its give error while submitting form

for remove this restriction we send particular value to remove restriction example:-

in above example we remove form submission restriction by using pass allow-form value we can remove different like this by providing separate value in sandbox

**examples:**

`<iframe src="https://xyz.com" width="100px" height="100px" sandbox="allow-forms"></iframe>`

## `FrameBorder`

For create border around iframe use frameborder attribute.

frame border accept value in number if frame border number size increase like 1 to 2 border size also increase You can create border according to your choice.

**Example:**

`<iframe src="https://xyz.com" width="100px" height="100px" sandbox="allow-forms" frameborder=”3”></iframe>`

## `src`

src(source) attribute defines source of the url  to embed page in iframe&#x20;

syntax:&#x20;

`src=" "`&#x20;

example:

`<iframe src="https://xyz.com" ></iframe>`

{% hint style="info" %}
Note: when inserting url, insert complete url with protocol. ex:(http or https)
{% endhint %}

{% content-ref url="attributes/height" %}
[height](https://iframe-doc.quantsapp.com/getting-started-with-iframe/attributes/height)
{% endcontent-ref %}

{% content-ref url="attributes/width" %}
[width](https://iframe-doc.quantsapp.com/getting-started-with-iframe/attributes/width)
{% endcontent-ref %}

{% content-ref url="attributes/sandbox" %}
[sandbox](https://iframe-doc.quantsapp.com/getting-started-with-iframe/attributes/sandbox)
{% endcontent-ref %}

{% content-ref url="attributes/frameborder" %}
[frameborder](https://iframe-doc.quantsapp.com/getting-started-with-iframe/attributes/frameborder)
{% endcontent-ref %}

{% content-ref url="attributes/src" %}
[src](https://iframe-doc.quantsapp.com/getting-started-with-iframe/attributes/src)
{% endcontent-ref %}

&#x20;we will see important attributes which are necessary to use in iframe&#x20;