Iframe in Layout Descriptor

We can configure any iframe in the layout descriptor. The iframe layout extends the default Layout and Layout Attributes and add new fields to easily configure our iframes.

Set the name of the layout to iframe/rawIframe to create an iframe:

{
  "name": "iframe/rawIframe"
}

Iframe attributes

Besides the default Layout Attributes we have also:

className

Type: String

Optional. A String with the class to add to the iframe element.

{
  "name": "iframe/rawIframe",
  "attr": {
    "className": "mrf-marfeelDocs-example"
  }
}

html result:

<article class="mrf-article-rawIframe">
  <iframe class="mrf-iframeLayout mrf-marfeelDocs-example"></iframe>
</article>

src

Type: String

Required. The src of the iframe.

{
  "name": "iframe/rawIframe",
  "attr": {
    "className": "mrf-marfeelDocs-example",
    "src": "https://example.com/results.html"
  }
}

width

Type: String

Optional. Custom width for iframes.

Default value is 100%.

Example:

{
  "name": "iframe/rawIframe",
  "attr": {
    "className": "mrf-marfeelDocs-example",
    "src": "https://example.com/results.html",
    "width": "100px"
  }
}

height

Type: String

Optional. Custom height for iframes.

Default value: auto.

Example:

{
  "name": "iframe/rawIframe",
  "attr": {
    "className": "mrf-marfeelDocs-example",
    "src": "https://example.com/results.html",
    "width": "100px",
    "height": "200px"
  }
}

iframeAttrs

Type: Object

Optional. Attributes to add to the iframe element.

Special attributes

class, src, width and height attributes should only be set with their custom fields, no through this object.

{
  "name": "iframe/rawIframe",
  "attr": {
    "className": "mrf-marfeelDocs-example another-class-here",
    "src": "https://example.com/results.html",
      "iframeAttrs": {
        "allow": "autoplay"
      }
  }
}