Iframes

Use an iframe block to embed an external page, video player, map or any other HTML that ships as an <iframe>. The whole <iframe> element is written verbatim -- MMX just wraps it in a container.

Basic syntax

The block starts with #iframe(¡ and ends with !). Paste a normal HTML <iframe> between the delimiters.

#iframe(¡<iframe ...></iframe>!)

The opener ¡ and the closer !) are part of the MMX syntax -- they make it easy to spot the start and end of an iframe block, even when the embedded HTML is long.

Example: an embedded YouTube video

#iframe(¡<iframe width="100%" height="315" src="https://www.youtube.com/embed/SR86aNrbWt0?si=2iqxizBLxEFmO1Po" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>!)

Example: an embedded map

#iframe(¡<iframe width="100%" height="400" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.1,51.5,-0.05,51.55&layer=mapnik" style="border: 1px solid #ccc"></iframe>!)

Notes

Note:

The iframe's width and height are passed through as written. To make the iframe responsive, set width="100%" and a fixed height (in pixels). The example above uses width="100%" and height="315".

Note:

For YouTube, prefer the <a target="_blank" href="https://www.youtube.com/embed">https://www.youtube.com/embed</a>/... URL over the regular watch URL. The embed form is the one YouTube designs for being placed inside another page.

Note:

Be careful with cross-origin iframes: a third-party iframe runs in its own context and cannot read or write the surrounding page. Always set the referrerpolicy, sandbox and allow attributes to the most restrictive values that still let the embed work.