Responsive <iframe /> 🖼

Description

Showcase project embedding an <iframe /> displayed in full height in host document.

<iframe /> is the way to go when embedding your website into any non third-party website with no configuration and while sandboxing style 🎨and security 🔒. However, building a responsive iframe 💻📱is pretty tricky. Especially displaying the iframe in full height in the host document.

Explanation

1. The <iframe /> window calculates its height 📏 and sends a message 📫(with a specific syntax) to its parent using the postMessage API.
2. The parent has a listener 👂to this message 📬 and dynamically sets the height of the <iframe />

Demo

This project is hosted on CodeSandbox.

Source

This project is inspired 💡& "forked" 🌱from the Making IFrames Responsive article from bitsofcode and the related source code.