By Angela C

October 12, 2021 in software html

Reading time: 1 minutes.

The <iframe> tag specifies an inline frame and is used to embed another document within the current HTML document.

iframes can be embedded into a Hugo Markdown document by wrapping it in a shortcode that allows raw HTML to be included.

There are some predefined Hugo shortcodes1 for rendering certain types of content such as youtube videos, instagram, tweets etc. Otherwise you can create a custom shortcode.

(A Flask or Dash app can also be embedded as an iframe.)

Iframes include the following attributes:

  • allowfullscreen: set to true to activate fullscreen mode.
  • height in pixels
  • loading to specify whether a browser should load an iframe immediately or to defer loading until some conditions are met. Options include eager or lazy.
  • src to specify the address of the document to embed in the iframe.
  • width in pixels, but can also be specified as a percentage.
  • title to include a title
  • style attribute to set CSS styling

By default an iframe has a border around it which can be removed by using the style attribute and setting the CSS border property to none. style="border:none;"

See www.w3schools.com 2

An iframe can be used as the target frame for a link.

Click the link to see a sample Dash app in the iframe above. My sample dash app

<iframe height='300' scrolling='yes' 
frameborder='no' allowtransparency='true' 
style='width: 100%'></iframe>

A plotly map:

  1. https://gohugo.io/content-management/shortcodes↩︎

  2. https://www.w3schools.com/tags/tag_iframe.AS↩︎