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.

Hugo

Bissetii provides a number of useful Hugo interfaces to make content creation easier.

Module Extension

To use iFrame component, you need to include "iframe" extension module into your front-matter or the global amp.toml data file. The code pattern is as follows:

1
2
3
4
5
6
7
8

+++
...
[modules]
extensions = [
	"iframe",
]
...
+++

Bissetii will automatically includes the extension module seamlessly in accordance to the output format (e.g. amp-iframe extension module for AMPHTML).

Shortcodes

Bissetii prepared a list of shortcodes to make iFrame component easier for content creation using Hugo. Here are some of the available shortcodes related to iFrame component.

iframe shortcode

iframe shortcode creates the correct iframe simultenously for multiple HTML output formats such as Vanilla HTML5 and AMPHTML. It was created to maintain sanity over managing a single set of iframe data.

Import Module

Before using iframe shortcode, you need to import the module extension called "iframe" inside your page’s front matter:

1
2
3
4
5
6
7

...
[modules]
extensions = [
	...,
	"iframe",
]
...

Bissetii will pull the necessary library (e.g. amp-iframe) for the respective output format.

Construct Data File

Due to the highly robust, unique, and use-case specific security requirements for each iframe, it is at best to use dataset approach via the Hugo data/ directory. iframe shortcode recognizes the following TOML data file pattern:

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

[show]
URL = "/"
Sandbox = [
	"allow-scripts",
	"allow-same-origin",
]
ID = "my-iframe-id-01"
Width = "300"
Height = "300"
Class = "custom-iframe"
VanillaHTML = "bissetii-only/iframe/myExample/content.html"
AMPHTML = """
### Markdown Header
This is a markdown message.
"""
Layout = "repsonsive"
Title = "Example iframe Data File"
Call the Shortcode

Once done, you can call the shortcode. The shortcode pattern is as follows:

{{< iframe [PATH-TO-DATA] >}}

iframe shortcode takes the following parameters:

  1. [PATH-TO-DATA] - COMPULSORY. the data path pointing to your targeted data file.

Example, for data TOML file shown above located in data/bissetii/data/examples/iframes/myExample.toml (Hugo’s data directory path is data/), calling the show dataset, the shortcode should be:

{{< iframe "bissetii.data.examples.iframes.myExample.show" >}}
		⥥
<amp-iframe src="https://www.zoralab.com/en-us/"
        sandbox="allow-scripts allow-same-origin"
        width="300"
        height="300" class="my-class"
        layout="responsive">
        <p><strong>Example of Using Markdown</strong></p>
<p>This is markdown text.</p>
</amp-iframe>

Go

Coming Soon.

HTML

Bissetii uses the standard <iframe> or <amp-iframe> to render iFrame Component seamlessly. Depending on the type of HTML you’re using, Bissetii suggests the following practices to best suit your use case.

Vanilla HTML5

For Vanilla HTML5, 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>

AMPHTML

For AMPHTML, you need to import the AMP extension for amp-iframe library as instructed by the AMP developers.

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

One key requirement for using amp-frame is that the original page length must attain a minimum of 600px before using the first one. This can work against short pages.

The recommended code pattern is as follows:

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>

CSS

This section covers all the CSS part for iFrame component. Please go through each sub-section carefully as they affects Bissetii styling directly.

CSS Class Tags

Bissetii provides the following CSS class tags for re-usable and common styling alterations.

hidden

The .hidden CSS class tag set the iframe to be invisible from user (assuming you’re using Bissetii’s default CSS variables' value). Although hiding within the page UI, the iframe display: CSS tag is not set to none.

CSS Variables

Bissetii provides a number of CSS variables for styling customizations. Depending on where is the alternation being applied, it can affects either targeted or all iframes.

Bissetii recommends to provide the CSS variables to the targeted iframe. Example:

1
2
3
4
5
6
7
8

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

--iframe-position

Affects the iframe display positioning. The value must be compliant to position: CSS field. Default is initial.

When the iframe has .hidden class tag, the default value is changed to absolute.

--iframe-border

Affects the iframe border. The value must be compliant to border: CSS field. Default is none.

--iframe-margin

Affects the iframe margin. The value must be compliant to margin: CSS field. Default is 1.5rem 0.

When the iframe has .hidden class tag, the default value is changed to 0.

--iframe-z-index

Affects the iframe z-index layering. The value must be compliant to z-index: CSS field. Default is initial.

When the iframe has .hidden class tag, the default value is changed to var(--z-index-hidden).

--iframe-overflow

Affects the iframe overflow behavior. The value must be compliant to overflow: CSS field. Default is auto.

--iframe-width

Affects the iframe width. The value must be compliant to width: CSS field. Default is 100%.

--iframe-min-height

Affects the iframe mininal height. The value must be compliant to min-height: CSS field. Default is 10rem.

When the iframe has .hidden class tag, the default value is changed to 0 and it affects height: CSS field simultenously.

Javascript

This component does not depend on any Javascript.

Sass

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s Sass codes is available at the following location:

pkg/components/internal/iframe

Epilogue

That is all about iFrame component in Bissetii. If you need more feature or encountered a bug. Please feel free to contact us by filling an issue ticket at our Issue Section. We will be glad to help you.