Add Video to Portfolio

When user types /add-video <URL>, follow these steps exactly.

Step 1: Extract Video ID

From the URL, extract the video ID:

• youtube.com/watch?v=VIDEO_ID → use VIDEO_ID
• youtu.be/VIDEO_ID → use VIDEO_ID
• youtube.com/embed/VIDEO_ID → use VIDEO_ID

Step 2: Fetch Video Title

Use the YouTube oEmbed API to get the video title (no API key needed):

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v={VIDEO_ID}&format=json

Fetch this URL and extract the title field from the JSON response. Use this title for:

• The iframe title attribute
• The <h3 class="video-card-title"> text

If the fetch fails, fall back to "Video" as the default title.

Step 3: Read index.html

Read index.html and identify these 5 video cards by their HTML comments:

• <!-- Horizontal Video Card 1 --> - first large video
• <!-- Horizontal Video Card 2 --> - second large video
• <!-- Small Video Card 1 --> - first small video
• <!-- Small Video Card 2 --> - second small video
• <!-- Small Video Card 3 --> - third small video

Also find <!-- More Videos Section --> where archived videos go.

Step 4: Cascade Videos Down

Perform these moves in order:

1. Small Card 3 → More section: Copy the entire <article> from Small Card 3 and insert it at the START of the More section's <div class="video-grid">, right after the <!-- Archived videos appear here --> comment (push existing archived videos down).

2. Small Card 2 → Small Card 3: Replace Small Card 3's <article> content with Small Card 2's content. Keep the <!-- Small Video Card 3 --> comment.

3. Small Card 1 → Small Card 2: Replace Small Card 2's <article> content with Small Card 1's content. Keep the <!-- Small Video Card 2 --> comment.

4. Horizontal Card 2 → Small Card 1: Replace Small Card 1's <article> with Horizontal Card 2's content, but change the class from video-card-horizontal to video-card-small. Keep the <!-- Small Video Card 1 --> comment.

5. Horizontal Card 1 → Horizontal Card 2: Replace Horizontal Card 2's <article> content with Horizontal Card 1's content. Keep the <!-- Horizontal Video Card 2 --> comment.

6. New video → Horizontal Card 1: Update Horizontal Card 1 with the new video:

   • Set iframe src to https://www.youtube.com/embed/{VIDEO_ID}
   • Set iframe title to the fetched YouTube title (from Step 2)
   • Set <h3 class="video-card-title"> to the fetched YouTube title
   • Keep category as "Deep Dives / Demos" unless specified

Video Card Templates

Horizontal card (for positions 1-2):

html
1          <!-- Horizontal Video Card 1 -->
2          <article class="video-card video-card-horizontal">
3            <div class="video-thumbnail video-thumbnail-16-9">
4              <iframe 
5                src="https://www.youtube.com/embed/{VIDEO_ID}" 
6                title="{TITLE}"
7                frameborder="0" 
8                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
9                allowfullscreen
10                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
11              </iframe>
12            </div>
13            <div class="video-info">
14              <span class="video-category">{CATEGORY}</span>
15              <h3 class="video-card-title">{TITLE}</h3>
16            </div>
17          </article>

Small card (for positions 1-3 and More section):

html
1          <!-- Small Video Card 1 -->
2          <article class="video-card video-card-small">
3            <div class="video-thumbnail video-thumbnail-16-9">
4              <iframe 
5                src="https://www.youtube.com/embed/{VIDEO_ID}" 
6                title="{TITLE}"
7                frameborder="0" 
8                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
9                allowfullscreen
10                style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
11              </iframe>
12            </div>
13            <div class="video-info">
14              <span class="video-category">{CATEGORY}</span>
15              <h3 class="video-card-title">{TITLE}</h3>
16            </div>
17          </article>

Example

Input: /add-video https://www.youtube.com/watch?v=abc123

Before:

• Horizontal 1: Video A
• Horizontal 2: Video B
• Small 1: Video C
• Small 2: Video D
• Small 3: Video E
• More: [Video F, Video G...]

After:

• Horizontal 1: NEW VIDEO (abc123)
• Horizontal 2: Video A
• Small 1: Video B (changed from horizontal to small class)
• Small 2: Video C
• Small 3: Video D
• More: [Video E, Video F, Video G...]

Optional Title/Category Override

By default, the video title is fetched automatically from YouTube.

If user wants to override the title: /add-video URL "My Custom Title" If user wants to override title and category: /add-video URL "My Custom Title" "Category Name"

User-provided values take precedence over the fetched YouTube title. Default category is "Deep Dives / Demos".