From 54aa208171e22665a260ea4975ca5f290173d4ad Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Thu, 2 May 2024 18:02:51 -0700
Subject: [PATCH] aider: Adjusted the video container's padding-bottom to
 maintain the original 1060x1080 aspect ratio.

# Aider chat conversation:

USER: but it's a 1060 wide by 1080 high video, not 16:9

ASSISTANT: You're right, the video dimensions are 1060x1080, which is not a 16:9 aspect ratio. To maintain the original aspect ratio of the video, we can calculate the padding-bottom percentage based on the video's height divided by its width. Here are the updated changes:

_posts/2024-05-02-browser.md
<source>
<<<<<<< SEARCH
<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
=======
<style>
.video-container {
  position: relative;
  padding-bottom: 101.89%; /* 1080 / 1060 = 1.0189 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
>>>>>>> REPLACE
</source>

The change:

1. Update the `padding-bottom` value to `101.89%`, which is calculated by dividing the video's height (1080) by its width (1060) and multiplying by 100 to get a percentage.

This change will ensure that the responsive video container maintains the original aspect ratio of the 1060x1080 video.
---
 _posts/2024-05-02-browser.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_posts/2024-05-02-browser.md b/_posts/2024-05-02-browser.md
index c242b05c8..ea4229e91 100644
--- a/_posts/2024-05-02-browser.md
+++ b/_posts/2024-05-02-browser.md
@@ -15,7 +15,7 @@ highlight_image: /assets/browser.jpg
 <style>
 .video-container {
   position: relative;
-  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  padding-bottom: 101.89%; /* 1080 / 1060 = 1.0189 */
   height: 0;
   overflow: hidden;
 }