iFrame Component

iFrame component is a nested browsing context, allowing one to embed another web page into the current one. This is widely used by may service providers to offer their third party services without needing heavy backend integrations. Bissetii styles iFrame seemlessly.

This component is available starting from v1.12.1.

Sass Styling Parts

The Sass styling script responsible for iFrame is located at:

assets/css/bissetii/modules/core/_IFrame.scss

Javascript Parts

This component does not depend on any Javascript.

HTML Parts

Bissetii uses the standard <iframe> or <amp-iframe> to render this component. Depending on output types, the code structure varies accordingly.

Vanilla HTML

For Vanilla HTML, the code pattern is as follow:

1
2
3
4
5
6
7

<iframe src="https://www.zoralab.com/en-us/"
	sandbox="allow-scripts allow-same-origin"
	width="300"
	height="300"
	title="Example iframe Data File">
	<!-- fallback mode contents -->
</iframe>

• Line 1 - <iframe> tag with the web page URL into src.
• Line 2 - for security reason, sandbox= property should be implemented in a compulsory manner.
• Line 3 - specifies the width of the <iframe>. Default is 100%.
• Line 4 - specifies the height of the <iframe>.
• Line 5 - specifies the title of the <iframe> for accessibility compatibility.
• Line 6 - specifies the fallback content if the <iframe> fails.

AMP HTML

For AMP HTML, you need to import the AMP extension for amp-iframe as instructed by the AMP developers. One key requirement for using amp-frame is that the original page length must attain a minimum of 600px before using one. This can work against short pages.

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

As the code pattern is as follow:

1
2
3
4
5
6
7

<amp-iframe src="https://www.zoralab.com/en-us/"
	sandbox="allow-scripts allow-same-origin"
	width="300"
	height="300"
	layout="repsonsive">
	<p>This is the internal content</p>
</amp-iframe>

• Line 1 - <amp-iframe> tag with the web page URL into src.
• Line 2 - for security reason, sandbox= property should be implemented in a compulsory manner.
• Line 3 - specifies the width of the <amp-iframe>.
• Line 4 - specifies the height of the <amp-iframe>.
• Line 5 - specifies the AMP layout of the <amp-iframe>.
• Line 6 - specifies the placeholder content if the <amp-iframe> is not loaded.

Available Styles

There are a bunch of iFrame component styling from Bissetii.

Default

The default rendering is as follow:

<iframe src="https://www.zoralab.com/en-us/"
        sandbox="allow-scripts allow-same-origin"
        width="300"
        height="300"
        class="my-class"
        title="Example iframe Data File">
        <p><strong>Example of Using Markdown</strong></p>
<p>This is markdown text.</p>
</iframe>

Hidden

Another style is to hide the iFrame component completely using the hidden class tag. This will hide the iFrame but leaving it functioning under the hood. The HTML codes for respective outputs are:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

<!-- Vanilla HTML -->
<iframe src="https://www.zoralab.com/en-us/"
	sandbox="allow-scripts allow-same-origin"
	width="300"
	height="300"
	class="hidden"
	title="Example iframe Data File">
	<p>This is the internal content</p>
</iframe>


<!-- AMP HTML -->
<amp-iframe src="https://www.zoralab.com/en-us/"
	sandbox="allow-scripts allow-same-origin"
	width="300"
	height="300"
	class="hidden"
	layout="repsonsive">
	<p>This is the internal content</p>
</amp-iframe>