From 23163b30952faf560d3364d68ae586ac838ea132 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 7 Nov 2018 02:42:46 -0600
Subject: [PATCH] Fix iframe aspect_ratio (#2004)

---
 src/panels/lovelace/cards/hui-iframe-card.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

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>