site-builder/VIDEO_BG_FIX.md

# Video Background Section - Fixed!

## Problem
The "Section (Video BG)" block didn't show the Video URL input field in the Settings panel when selected.

## Root Cause
The Video URL trait was only on the inner `bg-video-wrapper` element, which is deeply nested and hard to select directly. Users were selecting the outer `<section>` element, which didn't have the trait.

## Solution ✅
Added a new component type `video-section` that:
1. Detects the outer section element (`data-video-section="true"`)
2. Shows the Video URL trait in the Settings panel when selected
3. Propagates the URL to the inner `bg-video-wrapper` element automatically

## How to Use Now

### Step 1: Add Video Background Section
1. Open the **Blocks** panel (left sidebar)
2. Find **"Section (Video BG)"** under Layout category
3. Drag it onto the canvas

### Step 2: Select the Section
1. Click anywhere on the video background section
2. The section should be highlighted/selected

### Step 3: Add Your Video URL
1. Look at the **right sidebar** → **Settings tab**
2. You should now see a **"Video URL"** field
3. Paste your YouTube URL (or Vimeo, or .mp4)
   - Example: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`

### Step 4: Watch It Load
1. Video should appear in the background automatically
2. Click the play button to start playback
3. The video will loop and be muted (best practice for background videos)

## Supported Video Sources

### YouTube
```
https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
```

### Vimeo
```
https://vimeo.com/VIDEO_ID
https://player.vimeo.com/video/VIDEO_ID
```

### Direct Video Files
```
https://example.com/video.mp4
https://example.com/video.webm
```

## Troubleshooting

### "I don't see the Video URL field"
**Fix:** Make sure you're clicking on the section itself (the outer container), not the text inside it.
- Look for the section to be highlighted with a blue border
- Check the Layers panel (left sidebar) - you should see the section selected

### "Video doesn't load"
**Possible causes:**
1. **Invalid URL** - Make sure it's a proper YouTube/Vimeo/video file URL
2. **Embedding restrictions** - Some YouTube videos don't allow embedding
3. **Network issue** - Check your internet connection

### "Video shows Error 153"
**This is fixed!** The autoplay parameter has been removed. If you still see this:
1. Clear your browser cache
2. Refresh the page
3. Re-add the video URL

### "I want the video to autoplay"
Background videos **don't autoplay by default** anymore (to avoid Error 153). They will:
- Show a placeholder with a play button icon
- Start playing when clicked
- Loop continuously once playing
- Be muted (required for background videos)

## Customization Tips

### Change Overlay Opacity
1. Select the section
2. In Layers panel (left), expand the section
3. Select the `bg-overlay` layer
4. In Styles panel, adjust the background opacity

### Change Content Styling
1. The white text is in the `bg-content` layer
2. Select it in Layers panel
3. Customize in Styles panel:
   - Text color
   - Font size
   - Background (if you want a box behind the text)

### Adjust Section Height
1. Select the section
2. In Styles → Guided panel:
   - Look for Height controls
   - Or switch to Advanced tab
   - Set `min-height` to your desired size (e.g., `600px`, `100vh`)

## Technical Details

### Component Hierarchy
```
<section data-video-section="true">  ← Video URL trait here (NEW!)
  ├── <div data-bg-video="true">    ← Video wrapper (also has trait)
  │   ├── <iframe>                   ← YouTube/Vimeo iframe
  │   ├── <video>                    ← Direct video file
  │   └── <div.placeholder>          ← "Click to add video" message
  ├── <div.bg-overlay>               ← Dark overlay (adjustable)
  └── <div.bg-content>               ← Your content (text, buttons, etc.)
      └── <h2>, <p>, etc.
```

### How It Works
1. User enters URL in Settings panel (outer section)
2. Component detects URL change
3. Finds inner `bg-video-wrapper` element
4. Propagates URL to wrapper
5. Wrapper parses URL (YouTube/Vimeo/file)
6. Shows correct element (iframe or video tag)
7. Hides placeholder
8. Video is ready to play!

## Files Changed

**`/home/jknapp/code/site-builder/js/editor.js`:**
- Added `video-section` component type (lines ~1207-1230)
- Updated placeholder text for clarity
- Propagates Video URL from section → wrapper

## Before vs After

### Before (Broken)
```
User clicks section
→ No Video URL field in Settings
→ User confused, can't add video
→ Need to dig into Layers panel to find bg-video-wrapper
```

### After (Fixed)
```
User clicks section
→ Video URL field shows in Settings ✅
→ User enters URL
→ Video loads automatically ✅
→ Easy and intuitive!
```

## Next Steps

Want to enhance the video background experience? Future ideas:

1. **Autoplay toggle** - Optional checkbox to enable autoplay (with warning about Error 153)
2. **Playback controls** - Show/hide play/pause button overlay
3. **Video presets** - Pre-configured video backgrounds (nature, city, abstract)
4. **Fallback image** - Show image while video loads or if it fails
5. **Mobile optimization** - Option to use static image on mobile (saves data/battery)

---

**Enjoy your video backgrounds!** 🎥✨