Add an iframe

Published on

Add an IFrame

To add an IFrame to a post you can use a custom shortcode which optimizes IFrames on the site.

{% IFrame
src='https://example.com',
%}

The IFrame shortcode supports additional properties though. Below is an example interface of the accepted argument:

interface IFrameArgs {
src: string;
[key: string]: string | boolean | number;
}

Effectively you can add any attribute to an IFrame, the only required argument is a src.

Keep in mind, for an attribute that has a boolean value, just set the value to true, like so:

{% IFrame
src='https://example.com',
allowfullscreen=true
%}

The generated HTML will look like this:

<iframe style="height: 100%; width: 100%; border: 0;" title="IFrame content" src="https://example.com" allowfullscreen loading="lazy"></iframe>

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.