Wrap content in a 16/9 container.

src/frigate-hass-card.ts

@@ -512,7 +512,7 @@ export class FrigateCard extends LitElement {
     icon: string,
     message: string | TemplateResult | null = null,
   ): TemplateResult {
-    return html` <div class="frigate-card-contents attention">
+    return html` <div class="attention">
       <span>
         <ha-icon icon="${icon}"> </ha-icon>
         ${message ? html`&nbsp;${message}` : ''}
@@ -829,7 +829,6 @@ export class FrigateCard extends LitElement {
           ? html`<ha-hls-player
               .hass=${this._hass}
               .url=${resolvedMedia.url}
-              class="frigate-card-contents"
               title="${mediaToRender.title}"
               muted
               controls
@@ -839,7 +838,6 @@ export class FrigateCard extends LitElement {
             >
             </ha-hls-player>`
           : html`<video
-              class="frigate-card-contents"
               title="${mediaToRender.title}"
               muted
               controls
@@ -856,7 +854,7 @@ export class FrigateCard extends LitElement {
             </video>`
         : html`<img
             src=${resolvedMedia.url}
-            class="frigate-card-contents"
+            class="snapshot"
             title="${mediaToRender.title}"
             @click=${() => {
               // Get clips potentially related to this snapshot.
@@ -998,14 +996,16 @@ export class FrigateCard extends LitElement {
     }
     return html` <ha-card @click=${this._interactionHandler}>
       ${this.config.menu_mode != 'below' ? this._renderMenu() : ''}
-      <div class="frigate-card-contents">
-        ${this._view.is('clips') || this._view.is('snapshots')
-          ? until(this._renderEvents(), this._renderProgressIndicator())
-          : ``}
-        ${this._view.is('clip') || this._view.is('snapshot')
-          ? until(this._renderViewer(), this._renderProgressIndicator())
-          : ``}
-        ${this._view.is('live') ? this._renderLiveViewer() : ``}
+      <div class="container_16_9">
+        <div class="frigate-card-contents">
+          ${this._view.is('clips') || this._view.is('snapshots')
+            ? until(this._renderEvents(), this._renderProgressIndicator())
+            : ``}
+          ${this._view.is('clip') || this._view.is('snapshot')
+            ? until(this._renderViewer(), this._renderProgressIndicator())
+            : ``}
+          ${this._view.is('live') ? this._renderLiveViewer() : ``}
+        </div>
       </div>
       ${this.config.menu_mode == 'below' ? this._renderMenu() : ''}
     </ha-card>`;

src/scss/card.scss

@@ -2,26 +2,38 @@
 @use "@material/image-list";
 @use './common.scss';
 
+.container_16_9 {
+  /* 16:9 Aspect Ratio. When Safari supports 'aspect-ratio' this should not be
+     necessary */
+  padding-top: 56.25%;  // 9 / 16 == 0.5625
+}
+
 .frigate-card-contents {
+  position: absolute;
+  top: 0px;
+  left: 0px;
   width: 100%;
   height: 100%;
   aspect-ratio: 16 / 9;
   overflow: auto;
-
   -ms-overflow-style: none; /* Hide scrollbar: IE and Edge */
   scrollbar-width: none;    /* Hide scrollbar: Firefox */
 }
 
+.frigate-card-contents img.snapshot {
+  width: 100%;
+}
+
 /* Hide scrollbar for Chrome, Safari and Opera */
 .frigate-card-contents::-webkit-scrollbar {
   display: none;
 }
 
-.frigate-card-contents.attention {
+.frigate-card-contents .attention {
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-
   box-sizing: border-box;
   padding: 5%;
 }