Iframe Embedding: Serving External Content Seamlessly
Embedding content has been a staple of web development for quite some time. The <iframe> element, or inline frame, allows you to seamlessly integrate another HTML document within your current page. This is incredibly useful when you want to serve content from other parts of the web directly in your post without redirecting your audience elsewhere.
How to Embed Using Iframes?
First, here’s an example of an iFrame using Wikipedia’s homepage.
The integration from the reader’s perspective is pretty seamless Luckily, the process is also straightforward from the writer’s perspective. Here’s the code we used to embed the Wikipedia homepage:
<iframe src="https://en.wikipedia.org/wiki/Main_Page" width="100%" height="500" frameborder="0" allowfullscreen></iframe>
Why Use Iframes?
The main advantage of iframes is their ability to separate distinct pieces of content or functionality. For instance, when creating a blog post that features an interactive visualization, you might find it challenging to blend the visualization code with your writing seamlessly. The code might be extensive, or you may want the flexibility to update the visualization without modifying the main content of your post.
Consider this Airline Merger Visualization blog post for an illustrative example. The main blog content discusses creating the viz, and the viz itself is housed on a separate page. Rather than requiring readers to jump between two links, the content from the separate page was embedded directly into the main post using an iframe. This offers a cohesive reading experience without sacrificing the richness of the interactive content.
Cheers,
Erkin
Go ÖN Home
