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>

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>

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>