Using iframes in AsciiDoc

You can display an external web page inside an AsciiDoc file, by placing an HTML iframe element in a passthrough block. A few lines of CSS will make the iframe responsive. Here’s an example, courtesy of Wikipedia:

Source Code

To try this technique, copy the code below into an AsciiDoc file. Then insert your choice of URL. This technique was adapted from https://benmarshall.me/responsive-iframes/.

Copy this code into your AsciiDoc file:

++++
<!-- HTML to embed an iframe -->
<div class="iframe-container">
  <iframe src="https://www.wikipedia.org/" frameborder="0"></iframe>
</div>

<!-- CSS to make the iframe responsive -->
<style>
.iframe-container {
overflow: hidden;
padding-top: 100%;
position: relative;
}
.iframe-container iframe {
 border: 0;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
</style>
++++

Some websites do not allow their pages to be displayed inside an iframe. If you see a message saying that the connection was refused, you cannot use that address in an iframe.