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

@@ -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;
 }