mirror of
https://github.com/Aider-AI/aider.git
synced 2025-06-01 02:05:00 +00:00
a372fff409
# 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.
51 lines
1.4 KiB
Markdown
51 lines
1.4 KiB
Markdown
---
|
|
title: AI pair programming in your browser
|
|
excerpt: Aider has an experimental browser UI, allowing you to collaborate with LLMs on code in your local git repo.
|
|
highlight_image: /assets/browser.jpg
|
|
---
|
|
# AI pair programming in your browser
|
|
|
|
<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.
|
|
Aider will directly edit the code in your local source files,
|
|
and [git commit the changes](https://aider.chat/docs/faq.html#how-does-aider-use-git)
|
|
with sensible commit messages.
|
|
You can start a new project or work with an existing git repo.
|
|
Aider works well with GPT 3.5, GPT-4, GPT-4 Turbo with Vision,
|
|
and Claude 3 Opus.
|
|
It also supports [connecting to almost any LLM](https://aider.chat/docs/llms.html).
|
|
|
|
Use the `--browser` switch to launch the browser version of aider:
|
|
|
|
```
|
|
pip install aider-chat
|
|
|
|
export OPENAI_API_KEY=<key> # Mac/Linux
|
|
setx OPENAI_API_KEY <key> # Windows
|
|
|
|
aider --browser
|
|
```
|