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!