How to Make a Responsive Iframe for Embedding a Full Web Page

19 Aug 2023

If you’ve ever wanted to embed a full web page into your site using an <iframe>, you’ve probably run into the challenge of making it responsive.

An <iframe> is essentially a window to another web page within your own, and it can sometimes be tricky to ensure it looks good on various devices and screen sizes. In this guide, we’ll walk you through the steps to create a responsive <iframe> with a fixed height of 600px and a full-width display.

The `<iframe>` Element

Before diving into the responsive aspect, let’s quickly review the <iframe> element:

<iframe src="https://www.example.com" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

src: This is where you specify the URL of the web page you want to embed.
width: Initially, we set this to “100%” to ensure full-width, but we’ll revisit this in the responsive part.
height: We’ve set this to a fixed value of 600px as per your requirement.
frameborder: It’s a good practice to set this to “0” to remove any border around the <iframe>.
scrolling: We set this to “no” to disable scrolling within the <iframe>. You can adjust this based on your needs.

Making it Responsive

To make our <iframe> responsive and adapt to different screen sizes, we’ll need to use some CSS and a bit of JavaScript.

CSS

First, we’ll define a CSS class to style our <iframe> and ensure it takes up the full width of its container:

.responsive-iframe {
  width: 100%;
  height: 600px;
  border: none;
}

JavaScript

Now, we need to adjust the <iframe>’s width dynamically using JavaScript. We’ll use the following JavaScript code:

// Get a reference to the <iframe> element
const iframe = document.querySelector('iframe');

// Function to set the iframe width based on its container's width
function setIframeWidth() {
  const containerWidth = iframe.parentElement.clientWidth;
  iframe.style.width = containerWidth + 'px';
}

// Call the function initially and whenever the window is resized
setIframeWidth();
window.addEventListener('resize', setIframeWidth);

With this JavaScript, your <iframe> will automatically adjust its width whenever the window is resized, ensuring a responsive display.

Putting It All Together

Here’s how you can apply these changes to your HTML:

<div class="iframe-container">
  <iframe src="https://www.example.com" class="responsive-iframe" frameborder="0" scrolling="no"></iframe>
</div>

Make sure to include the CSS and JavaScript code within your HTML document or link to separate files.

Conclusion

In this guide, we’ve learned how to create a responsive <iframe> for embedding a full web page with a fixed height of 600px and a width that adjusts dynamically to the container’s size. By following these steps and applying the provided CSS and JavaScript, you can seamlessly integrate external web content into your website, ensuring a consistent and user-friendly experience across various devices and screen sizes.