Click hyperlink to load an iframe in AsciiDoc

Click a link to load a page in the iframe:

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:

++++
<p><a href="http://www.bing.com/" target="frame">Bing</a></p>
<p><a href="https://antora.org/" target="frame">Antora.org</a></p>
<p><a href="https://asciidoctor-docs.netlify.app/" target="frame">The Docs @ Asciidoctor</a></p>
<p><a href="https://asciidoctor.org/" target="frame">AsciiDoctor.org</a></p>
<p><a href="https://pressureluckcooking.com/recipe/instant-pot-roast/" target="frame">Pot Roast Recipe</a></p>
<br>
<hr>

<!-- HTML to embed an iframe -->
<div class="iframe-container">
  <iframe name="frame" src="https://www.usps.com/" 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.