iframe Elements & Attributes

src

The src attribute specifies the URL of the page you want to embed.

Width & Height

The width attribute specifies the width of the iframe. The height attribute specifies the height of the iframe.

allowfullscreen (Attribute)

The allowfullscreen attribute allows the user to display the iframe in full screen mode.

Title (opt.)

It's also a good practice to specify a title attribute for the iframe, as it's important for accessibility.

Allow (Arrtibute)

The allow attribute, on the other hand, lets you define what an iframe can or can't do. This is called an allowlist.

allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"

Accelerometer

accelerometer lets the iframe use motion sensors so it can detect things like device tilting and rotation.

Autoplay

autoplay lets the video start playing automatically.

Clipboard-write

clipboard-write lets the iframe write data to the user’s clipboard.

encrypted-media, gyroscope, & web-share

These three will allow the use of encrypted media extensions to protect the video, grant access to the device’s motion and orientation sensors, and allow sharing the iframe content through the device's native share dialogs.

referrerpolicy (Attribute)

It is the rule that determines how much detail you share when your page connects to another page.

When set to strict-origin-when-cross-origin, this shares the full address on the same site, only the site name on other sites, and nothing on insecure sites.

referrerpolicy="strict-origin-when-cross-origin"