dearwolf/aider
1
0
Fork 0
mirror of https://github.com/Aider-AI/aider.git synced 2025-05-29 08:44:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

aider: Made the video responsive to prevent overflow on mobile devices.

Browse source 
# 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.
This commit is contained in:
Paul Gauthier 2024-05-02 18:02:10 -07:00
parent 259a663941
commit a372fff409
1 changed files with 23 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

27
_posts/2024-05-02-browser.md
View file

@ -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.