# YouTube Video Setup Guide

## How to Update the Video Tour Section

The video tour section on the homepage currently uses placeholder video IDs. Follow these steps to add your actual Kofi Farms YouTube videos.

---

## Steps to Update

### 1. Get Your YouTube Video IDs

For each video you want to feature:

1. Go to your YouTube video
2. Look at the URL. It will be in this format:
   ```
   https://www.youtube.com/watch?v=VIDEO_ID_HERE
   ```
3. Copy the `VIDEO_ID_HERE` part

**Example:**
- Full URL: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`
- Video ID: `dQw4w9WgXcQ`

---

### 2. Update index.php

Open `index.php` and find the Video Tour section (around line 180-220).

Replace the placeholder video IDs in these three locations:

```php
<!-- VIDEO 1 -->
<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_1" ...></iframe>

<!-- VIDEO 2 -->
<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_2" ...></iframe>

<!-- VIDEO 3 -->
<iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID_3" ...></iframe>
```

---

### 3. Update Video Titles and Descriptions

Also update the title and description for each video card:

```html
<div class="video-card-body">
  <h3>Your Video Title Here</h3>
  <p>Your video description here - keep it concise, 1-2 sentences.</p>
</div>
```

---

## Recommended Videos to Feature

Based on Kofi Farms' content, consider featuring:

1. **Daily Operations**
   - Title: "A Day in the Life at Kofi Farms"
   - Content: Farm tour, daily routines, egg collection

2. **Training Programme**
   - Title: "Inside Our Farmer Training Programme"
   - Content: Training sessions, hands-on learning, student testimonials

3. **Educational Content**
   - Title: "Feed Efficiency Secrets" or "Disease Management Tips"
   - Content: Practical farming advice, technical tips

---

## Example Complete Video Card

```html
<div class="video-card">
  <div class="video-thumbnail">
    <iframe 
      src="https://www.youtube.com/embed/ABC123XYZ" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen
    ></iframe>
  </div>
  <div class="video-card-body">
    <h3>Day in the Life at Kofi Farms</h3>
    <p>Follow us through a typical day on the farm — feeding, egg collection, biosecurity checks, and more.</p>
  </div>
</div>
```

---

## Adding More Videos

To add a 4th, 5th, or more videos:

1. Copy one complete video card block
2. Paste it before the closing `</div>` of the `video-grid`
3. Update the video ID, title, and description
4. The grid will automatically adjust to show all videos

---

## Troubleshooting

### Video Won't Load
- Check that the video ID is correct
- Ensure the video is set to "Public" or "Unlisted" on YouTube
- Verify the video hasn't been removed

### Video Looks Distorted
- The CSS maintains a 16:9 aspect ratio automatically
- Don't modify the iframe dimensions manually

### Want to Change Grid Layout
In `style.css`, find `.video-grid` and adjust:
```css
.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  /* Change 320px to control minimum card width */
}
```

---

## Testing

After updating:

1. Refresh the homepage
2. Check that all videos display correctly
3. Click play on each video to verify they work
4. Test on mobile devices
5. Verify titles and descriptions are accurate

---

## Notes

- Videos load from YouTube's servers, so users need internet connection
- Consider video length: 3-10 minutes is ideal for website embeds
- Keep descriptions concise: 1-2 sentences per video
- You can link to your full YouTube channel from this section

---

**For your reference, the Kofi Farms YouTube channel is:**
https://www.youtube.com/@Kofifarms
