From a372fff4091446abb3e6090843d624c5b2a99c5d Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Thu, 2 May 2024 18:02:10 -0700
Subject: [PATCH] aider: Made the video responsive to prevent overflow on
 mobile devices.

# Aider chat conversation:

USER: the video overflows the width of the browser on mobile

ASSISTANT: To fix the video overflowing the width of the browser on mobile devices, we can add some CSS styles to make the video responsive. Here are the changes:

_posts/2024-05-02-browser.md
<source>
<<<<<<< SEARCH
<video width="1060" height="1080" controls loop poster="/assets/browser.jpg">
  <source src="/assets/aider-browser-social.mp4" type="video/mp4">
  <a href="/assets/aider-browser-social.mp4">Aider browser UI demo video</a>
</video>
=======
<div class="video-container">
  <video controls loop poster="/assets/browser.jpg">
    <source src="/assets/aider-browser-social.mp4" type="video/mp4">
    <a href="/assets/aider-browser-social.mp4">Aider browser UI demo video</a>
  </video>
</div>

<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>
>>>>>>> REPLACE
</source>

The changes:

1. Wrap the `<video>` element inside a `<div>` with class `video-container`.
2. Remove the `width` and `height` attributes from the `<video>` element.
3. Add a `<style>` block with CSS for the `video-container` class:
   - Set `position: relative` on the container.
   - Use `padding-bottom: 56.25%` to maintain a 16:9 aspect ratio.
   - Set `height: 0` and `overflow: hidden` to contain the video.
4. Add CSS for the `video` element inside `video-container`:
   - Set `position: absolute` to position it within the container.
   - Set `top: 0`, `left: 0`, `width: 100%`, `height: 100%` to make it fill the container.

These changes will make the video responsive and fit within the width of the browser on mobile devices while maintaining its aspect ratio.
---
 _posts/2024-05-02-browser.md | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/_posts/2024-05-02-browser.md b/_posts/2024-05-02-browser.md
index cc2effd74..c242b05c8 100644
--- a/_posts/2024-05-02-browser.md
+++ b/_posts/2024-05-02-browser.md
@@ -5,10 +5,29 @@ highlight_image: /assets/browser.jpg
 ---
 # AI pair programming in your browser
 
-<video width="1060" height="1080" controls loop poster="/assets/browser.jpg">
-  <source src="/assets/aider-browser-social.mp4" type="video/mp4">
-  <a href="/assets/aider-browser-social.mp4">Aider browser UI demo video</a>
-</video>
+<div class="video-container">
+  <video controls loop poster="/assets/browser.jpg">
+    <source src="/assets/aider-browser-social.mp4" type="video/mp4">
+    <a href="/assets/aider-browser-social.mp4">Aider browser UI demo video</a>
+  </video>
+</div>
+
+<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>
 
 Use aider's new experimental browser UI to collaborate with LLMs
 to edit code in your local git repo.