HtmlHow-ToBeginner · 3 min read

How to Make iframe Responsive: Simple HTML & CSS Guide

To make an iframe responsive, wrap it in a container with position: relative; and use padding-top to keep the aspect ratio. Then set the iframe to position: absolute;, width: 100%;, and height: 100%; so it fills the container and scales with the screen.

📐

Syntax

Wrap your iframe inside a container div. The container uses position: relative; and a padding-top percentage to keep the aspect ratio (like 56.25% for 16:9). The iframe inside uses position: absolute; and fills the container with width: 100%; and height: 100%;.

Container div: controls the aspect ratio and size
padding-top: sets height relative to width (aspect ratio)
iframe: positioned absolutely to fill container

html

<div class="iframe-container">
  <iframe src="URL" frameborder="0" allowfullscreen></iframe>
</div>

<style>
.iframe-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

💻

Example

This example shows a responsive YouTube video embedded with an iframe. The video scales smoothly on different screen sizes while keeping the 16:9 ratio.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive iframe Example</title>
  <style>
    .iframe-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin: auto;
      padding-top: 56.25%; /* 16:9 Aspect Ratio */
    }
    .iframe-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
</head>
<body>
  <h2>Responsive YouTube Video</h2>
  <div class="iframe-container">
    <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen title="YouTube video"></iframe>
  </div>
</body>
</html>

Output

A centered YouTube video that resizes smoothly to fit the screen width while keeping the 16:9 ratio.

⚠️

Common Pitfalls

Not setting the container position to relative causes the iframe to not position correctly.
Using fixed width and height on the iframe breaks responsiveness.
Forgetting to use padding-top on the container means the aspect ratio is lost and the iframe height collapses.
Not including allowfullscreen attribute if fullscreen is needed.

html

<!-- Wrong way: fixed size iframe -->
<iframe src="URL" width="560" height="315" frameborder="0"></iframe>

<!-- Right way: responsive iframe inside container -->
<div style="position:relative; width:100%; padding-top:56.25%;">
  <iframe src="URL" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" allowfullscreen></iframe>
</div>

📊

Quick Reference

Container: position: relative;, width: 100%;, padding-top for aspect ratio
iframe: position: absolute;, top: 0;, left: 0;, width: 100%;, height: 100%;, border: 0;
Use padding-top: 56.25% for 16:9 ratio, 75% for 4:3 ratio
Always add allowfullscreen if fullscreen is needed

✅

Key Takeaways

Wrap the iframe in a container with relative position and padding-top for aspect ratio.

Set the iframe to absolute position with width and height 100% to fill the container.

Use padding-top percentage to keep the correct aspect ratio (e.g., 56.25% for 16:9).

Avoid fixed width and height on iframe to maintain responsiveness.

Include allowfullscreen attribute if fullscreen mode is desired.