diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 13827cc89e..a8089344d7 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -4,6 +4,7 @@ import "../../../components/ha-card";
 
 import { LovelaceCard, LovelaceConfig } from "../types";
 import { TemplateResult } from "lit-html";
+import { styleMap } from "lit-html/directives/styleMap";
 
 interface Config extends LovelaceConfig {
   aspect_ratio?: string;
@@ -37,10 +38,16 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
       return html``;
     }
 
+    const aspectRatio = this._config.aspect_ratio || "50%";
+
     return html`
       ${this.renderStyle()}
       <ha-card .header="${this._config.title}">
-        <div id="root">
+        <div id="root"
+          style="${styleMap({
+            "padding-top": aspectRatio,
+          })}"
+        >
           <iframe src="${this._config.url}"></iframe>
         </div>
       </ha-card>