site-builder/VIDEO_DEBUG_GUIDE.md

# Video Background Debug Guide

## What I Fixed

Added **multiple listeners** to catch the video URL trait change:

1. **Component-level listener** (in video-section init)
2. **Global update listener** (component:update event)
3. **Console logging** to see what's happening

## How to Test

### Step 1: Open Browser Console
1. Open `/home/jknapp/code/site-builder/index.html`
2. Press **F12** to open Developer Tools
3. Click **Console** tab
4. Keep it open while testing

### Step 2: Add Video Background Section
1. Drag "Section (Video BG)" to canvas
2. Click on the section to select it

### Step 3: Enter Video URL
1. Right sidebar → **Settings** tab
2. Find **"Video URL"** field
3. Enter: `https://www.youtube.com/watch?v=OC7sNfNuTNU`
4. **Press Enter or Tab** (important!)

### Step 4: Check Console Output

You should see messages like:
```
Video section updated with URL: https://www.youtube.com/watch?v=OC7sNfNuTNU
Applying video URL to wrapper
Video URL changed: https://www.youtube.com/watch?v=OC7sNfNuTNU
Video wrapper found: true
```

### Step 5: Check the Video

- Placeholder should disappear
- Video iframe should appear
- If it doesn't, check console for errors

## Troubleshooting Console Messages

### If you see: "Video wrapper not found!"
**Problem:** The bg-video-wrapper child element isn't being found

**Fix:**
1. Check Layers panel (left sidebar)
2. Expand the section
3. Look for a div with `data-bg-video="true"`
4. If missing, the block structure is broken

### If you see: "Video section updated..." but no video loads
**Problem:** The applyVideoUrl function might be failing

**Check:**
1. Look for red error messages in console
2. Check if iframe/video elements exist in Layers panel
3. Try a different video URL

### If you see NO console messages
**Problem:** The trait change isn't being detected

**Try:**
1. Click outside the Video URL field after typing
2. Press Enter after pasting URL
3. Try clicking on a different element, then back to the section
4. Refresh page and try again

## Expected Console Flow

```
1. Add section to canvas
   → No messages yet

2. Select section
   → No messages yet

3. Type URL in Video URL field
   → No messages yet

4. Press Enter or Tab
   → "Video section updated with URL: ..."
   → "Applying video URL to wrapper"
   → "Video URL changed: ..."
   → "Video wrapper found: true"

5. Video loads
   → Placeholder hides
   → Iframe appears with video
```

## Manual Verification

If console logging works but video doesn't load:

### Check 1: Is the iframe getting the URL?
1. Open Elements tab (next to Console)
2. Find the `<iframe>` with class `bg-video-frame`
3. Check if `src` attribute has the embed URL
4. Should be: `https://www.youtube.com/embed/OC7sNfNuTNU?mute=1&loop=1&playlist=OC7sNfNuTNU&rel=0`

### Check 2: Is the iframe visible?
1. Same iframe element in Elements tab
2. Check `style` attribute
3. Should have `display: block`
4. Should NOT have `display: none`

### Check 3: Is the placeholder hidden?
1. Find the div with class `bg-video-placeholder`
2. Check `style` attribute
3. Should have `display: none`

## If Everything Above Works But Video Still Doesn't Show

### Possibility 1: Network/CORS Issue
- Check Network tab for failed requests
- YouTube might be blocking the embed
- Try a different video URL

### Possibility 2: YouTube Restrictions
- Some videos can't be embedded
- Try this known-working video: `https://www.youtube.com/watch?v=dQw4w9WgXcQ`

### Possibility 3: Browser Extensions
- Ad blockers might block YouTube embeds
- Try in Incognito/Private mode
- Disable extensions temporarily

## Quick Test URLs

Try these if your URL doesn't work:

```
YouTube:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
https://www.youtube.com/watch?v=jNQXAC9IVRw

Vimeo:
https://vimeo.com/148751763

Direct MP4:
https://www.w3schools.com/html/mov_bbb.mp4
```

## Report Back

After testing, let me know:

1. **What console messages you saw** (copy/paste)
2. **Whether video loaded** (yes/no)
3. **Any error messages** (red text in console)
4. **Which test URL you used**

This will help me fix any remaining issues!

---

**Changes Made:**
- Added `component:update` event listener
- Added console.log debugging
- Simplified trait definition (removed `changeProp`)
- Used arrow function for proper `this` binding

**Files Changed:**
- `/home/jknapp/code/site-builder/js/editor.js`

---

**Next:** Test with console open and report what you see!