From db0e420ea01d3b50f56caa8a0d04c3b22af5c3ec Mon Sep 17 00:00:00 2001
From: Paul Gauthier <aider@paulg.org>
Date: Thu, 2 May 2024 10:41:46 -0700
Subject: [PATCH] aider: Added a poster image to the video tag

# Aider chat conversation:

USER: add the highlight image as the thumbnail that will show before the <video> tag plays

ASSISTANT: To add the highlight image as a thumbnail that shows before the video plays, we can use the `poster` attribute on the `<video>` tag.

Here is the *SEARCH/REPLACE* block:

_posts/2024-05-02-browser.md
<source>
<<<<<<< SEARCH
<video width="704" height="720" controls>
=======
<video width="704" height="720" controls poster="/assets/browser.jpg">
>>>>>>> REPLACE
</source>

The `poster` attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. This will display the `browser.jpg` image before the video starts playing.
---
 _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 7f88087fd..ad6fb7656 100644
--- a/_posts/2024-05-02-browser.md
+++ b/_posts/2024-05-02-browser.md
@@ -5,7 +5,7 @@ highlight_image: /assets/browser.jpg
 ---
 # AI pair programming in your browser
 
-<video width="704" height="720" controls>
+<video width="704" height="720" controls poster="/assets/browser.jpg">
   <source src="/assets/aider-browser-social.mp4" type="video/mp4">
   [Aider browser UI demo video](/assets/aider-browser-social.mp4)
 </video>