Fixed video card aspect ratio on frontend (#21911)

ref
https://linear.app/ghost/issue/DES-1047/video-ratio-is-off-on-frontend
- When a video card is rendered on the frontend, the aspect ratio was
not correctly calculated and displayed. This commit fixes the issue by
calculating the aspect ratio based on the video's width and height.

ghost/core/core/frontend/src/cards/css/video.css

@@ -18,9 +18,18 @@
 
 .kg-video-container {
     position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+    height: 0;
+    width: 100%;
+    overflow: hidden;
+}
+
+.kg-video-container video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .kg-video-overlay {
@@ -58,13 +67,14 @@
 
 .kg-video-player-container {
     position: absolute;
-    bottom: 0;
+    bottom: -1px;
+    left: 0;
+    right: 0;
     width: 100%;
     height: 80px;
     background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
     z-index: 999;
     transition: opacity .2s ease-in-out;
-
 }
 
 .kg-video-player {

ghost/core/core/frontend/src/cards/js/video.js

@@ -224,9 +224,19 @@
         });
     }
 
+    const setVideoContainerAspectRatio = function(videoCard) {
+        const container = videoCard.querySelector('.kg-video-container');
+        const video = container.querySelector('video');
+        if (container && video.width && video.height) {
+            const aspectRatio = (video.height / video.width * 100).toFixed(3);
+            container.style.paddingBottom = `${aspectRatio}%`;
+        }
+    };
+
     const videoCardElements = document.querySelectorAll('.kg-video-card');
 
     for (let i = 0; i < videoCardElements.length; i++) {
+        setVideoContainerAspectRatio(videoCardElements[i]);
         handleVideoPlayer(videoCardElements[i]);
     }
 })();