🗒️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
Width	Width
SandBox	SandBox
FrameBorder	FrameBorder
src	src

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(%).

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:

allow-forms Allows form submission

allow-same-origin Allows the iframe content to be treated as being from the same origin

allow-script Allows to run scripts

syntax:

<iframe sandbox=" "></iframe>

description:

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

syntax:

src=" "

example:

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

Note: when inserting url, insert complete url with protocol. ex:(http or https)

HeightWidthsandboxframebordersrc

we will see important attributes which are necessary to use in iframe