# Wooden Games Images and Videos Setup Guide

## Overview
The wooden games pages have been updated to support images and video links. All 10 games on both the rental and sale pages now have image and video containers ready to be populated.

## Image Setup

### Location
Place game images in: `images/games/`

### Image File Names
Use these exact file names (case-sensitive):
- `giant-jenga.jpg`
- `cornhole.jpg`
- `giant-connect-4.jpg`
- `croquet.jpg`
- `ladder-toss.jpg`
- `ring-toss.jpg`
- `badminton.jpg`
- `kubb.jpg`
- `horseshoes.jpg`
- `giant-checkers.jpg`

### Image Requirements
- Format: JPG, PNG, or WebP
- Recommended size: 800x600px or larger
- Aspect ratio: 16:9 or 4:3 works best
- File size: Keep under 500KB for fast loading

## Video Setup

### Adding YouTube Videos

1. **Get the Video ID** from your YouTube URL:
   - Example: `https://www.youtube.com/watch?v=VIDEO_ID`
   - Or: `https://youtu.be/VIDEO_ID`

2. **Find the game section** in `wooden-games-carnival-stalls.html` or `wooden-games-sale.html`

3. **Update the iframe src**:
   ```html
   <iframe class="game-video" 
           src="https://www.youtube.com/embed/VIDEO_ID" 
           frameborder="0" 
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
           allowfullscreen></iframe>
   ```

4. **Remove the display:none style** - The video will automatically show when a src is added.

### Adding Vimeo Videos

1. **Get the Video ID** from your Vimeo URL:
   - Example: `https://vimeo.com/VIDEO_ID`

2. **Update the iframe src**:
   ```html
   <iframe class="game-video" 
           src="https://player.vimeo.com/video/VIDEO_ID" 
           frameborder="0" 
           allow="autoplay; fullscreen; picture-in-picture" 
           allowfullscreen></iframe>
   ```

### Adding Direct Video Links

For MP4 or other video formats hosted on your server:
```html
<video class="game-video" controls>
    <source src="videos/game-name.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
```

## Games List

### Rental Page (`wooden-games-carnival-stalls.html`)
1. Giant Jenga
2. Cornhole
3. Giant Connect Four (Hardwood)
4. Croquet
5. Ladder Toss (Ladder Golf)
6. Ring Toss
7. Badminton
8. Kubb (Viking Chess)
9. Horseshoes
10. Giant Checkers/Chess

### Sale Page (`wooden-games-sale.html`)
All games listed on the sale page also support images and videos. Update them using the same method.

## Quick Steps to Add Content from Google Drive

1. **Download images** from Google Drive
2. **Rename them** to match the file names above
3. **Place them** in `images/games/` folder
4. **For videos**: 
   - If on YouTube/Vimeo: Get the video ID and update the iframe src
   - If in Google Drive: Download and upload to your server, then link directly

## Testing

After adding images/videos:
1. Open the page in a browser
2. Check that images display correctly
3. Test video playback
4. Verify on mobile devices (responsive design)

## Notes

- Images will automatically hide if they fail to load (onerror handler)
- Videos are hidden by default until you add a src attribute
- All media is responsive and will scale on mobile devices
- The structure supports both images and videos for each game



