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! 🎥✨