279 lines
10 KiB
Markdown
279 lines
10 KiB
Markdown
|
# Video Background - Complete User Guide
|
||
|
|
|
||
|
|
## ✅ Fixed Issues
|
||
|
|
|
||
|
|
1. **Multiple input fields** - Now there's only ONE place to enter the video URL
|
||
|
|
2. **Confusing UI** - Inner layers are now non-selectable
|
||
|
|
3. **HTML Editor** - NEW! Edit any element's HTML directly
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## How to Add Video Background (Step-by-Step)
|
||
|
|
|
||
|
|
### Step 1: Add the Block
|
||
|
|
1. Look at the **left sidebar** → **Blocks** panel
|
||
|
|
2. Scroll to **Layout** category
|
||
|
|
3. Find **"Section (Video BG)"** block
|
||
|
|
4. **Click it once** → it adds to the canvas
|
||
|
|
|
||
|
|
### Step 2: Select the Section
|
||
|
|
1. **Click on the section** you just added
|
||
|
|
2. You should see a **blue outline** around the entire section
|
||
|
|
3. Don't click on the text inside - click the section background
|
||
|
|
|
||
|
|
### Step 3: Open Settings Panel
|
||
|
|
1. Look at the **right sidebar**
|
||
|
|
2. If you see **"Styles"** tab, click the **"Settings"** tab next to it
|
||
|
|
3. OR look for a tab that says **"Traits"** or **"Settings"**
|
||
|
|
|
||
|
|
### Step 4: Enter Video URL (THE ONLY PLACE!)
|
||
|
|
1. In the Settings panel, you'll see **"Video URL"** field
|
||
|
|
2. **This is the ONLY place you need to enter the URL**
|
||
|
|
3. Paste your YouTube URL, examples:
|
||
|
|
- `https://www.youtube.com/watch?v=OC7sNfNuTNU`
|
||
|
|
- `https://youtu.be/dQw4w9WgXcQ`
|
||
|
|
- `https://vimeo.com/12345678`
|
||
|
|
- `https://example.com/video.mp4`
|
||
|
|
|
||
|
|
4. **Press Enter** or **click outside** the field
|
||
|
|
|
||
|
|
### Step 5: Watch It Load
|
||
|
|
1. Wait 1-2 seconds
|
||
|
|
2. The placeholder text should disappear
|
||
|
|
3. Your video appears in the background!
|
||
|
|
4. If it's a YouTube/Vimeo video, **click the play button** to start it
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## ⚠️ Important: Only ONE Input Field!
|
||
|
|
|
||
|
|
**Where to enter the URL:**
|
||
|
|
- ✅ **Main section element** → Settings panel → "Video URL" field
|
||
|
|
|
||
|
|
**DO NOT look for:**
|
||
|
|
- ❌ Inner wrapper elements (these are now hidden)
|
||
|
|
- ❌ Multiple Video URL fields (there's only one now)
|
||
|
|
- ❌ Advanced traits (not needed)
|
||
|
|
|
||
|
|
**If you see multiple Video URL fields:**
|
||
|
|
- You're probably selecting the wrong element
|
||
|
|
- Click on the **outer section** (the blue border should wrap the whole thing)
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Video URL Formats Supported
|
||
|
|
|
||
|
|
### YouTube
|
||
|
|
```
|
||
|
|
https://www.youtube.com/watch?v=VIDEO_ID
|
||
|
|
https://youtu.be/VIDEO_ID
|
||
|
|
https://www.youtube.com/embed/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
|
||
|
|
https://example.com/video.ogg
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Troubleshooting
|
||
|
|
|
||
|
|
### "I don't see the Video URL field"
|
||
|
|
|
||
|
|
**Solution 1:** Make sure you selected the section itself
|
||
|
|
1. Click directly on the dark section background
|
||
|
|
2. NOT on the white text inside
|
||
|
|
3. Look for blue outline around the WHOLE section
|
||
|
|
|
||
|
|
**Solution 2:** Switch to Settings tab
|
||
|
|
1. Right sidebar should show tabs: **Styles** | **Settings**
|
||
|
|
2. Click **Settings** tab
|
||
|
|
3. Video URL field should appear there
|
||
|
|
|
||
|
|
**Solution 3:** Check Layers panel
|
||
|
|
1. Left sidebar → click **"Layers"** tab
|
||
|
|
2. Find the section element (should say `<section>`)
|
||
|
|
3. Click it there to select it
|
||
|
|
4. Now check Settings panel again
|
||
|
|
|
||
|
|
### "Video doesn't load after entering URL"
|
||
|
|
|
||
|
|
**Check these:**
|
||
|
|
1. Did you press Enter after pasting the URL?
|
||
|
|
2. Is the URL valid? (test it in a new browser tab)
|
||
|
|
3. Wait 2-3 seconds - sometimes takes time to load
|
||
|
|
4. Check browser console for errors (F12)
|
||
|
|
|
||
|
|
### "I see multiple Video URL fields"
|
||
|
|
|
||
|
|
**This shouldn't happen anymore!** But if you do:
|
||
|
|
1. Only use the FIRST one you see
|
||
|
|
2. Make sure you're on the latest version (refresh the page)
|
||
|
|
3. If still seeing duplicates, report it as a bug
|
||
|
|
|
||
|
|
### "Video shows Error 153"
|
||
|
|
|
||
|
|
This error means the video owner doesn't allow autoplay embedding.
|
||
|
|
|
||
|
|
**What we fixed:**
|
||
|
|
- Removed `autoplay=1` parameter from embed URLs
|
||
|
|
- Videos now require manual play button click
|
||
|
|
- This is YouTube's policy, not a bug
|
||
|
|
|
||
|
|
**Workaround:**
|
||
|
|
- Just click the play button on the video
|
||
|
|
- It will play and loop normally after that
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## NEW FEATURE: HTML Editor
|
||
|
|
|
||
|
|
You can now edit the HTML of ANY element directly!
|
||
|
|
|
||
|
|
### How to Use HTML Editor
|
||
|
|
|
||
|
|
1. **Select any element** on the canvas
|
||
|
|
2. **Scroll down** in the Settings panel
|
||
|
|
3. Find **"Edit HTML"** section
|
||
|
|
4. You'll see a **code editor** with the element's HTML
|
||
|
|
5. **Edit the HTML** as needed
|
||
|
|
6. Click **"Apply Changes"** button
|
||
|
|
7. OR click **"Cancel"** to revert
|
||
|
|
|
||
|
|
### Example: Add Custom Attributes
|
||
|
|
```html
|
||
|
|
<!-- Before -->
|
||
|
|
<h1>My Heading</h1>
|
||
|
|
|
||
|
|
<!-- After editing -->
|
||
|
|
<h1 id="main-title" data-custom="value">My Heading</h1>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Use Cases
|
||
|
|
- Add custom `id` or `class` attributes
|
||
|
|
- Modify inner content
|
||
|
|
- Add data attributes
|
||
|
|
- Change element structure
|
||
|
|
- Quick fixes without recreating elements
|
||
|
|
|
||
|
|
### ⚠️ Warning
|
||
|
|
- Invalid HTML will show an error
|
||
|
|
- Changes replace the entire element
|
||
|
|
- Use carefully - can break styling if not careful
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Visual Guide: Where to Find Everything
|
||
|
|
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ Left Sidebar │
|
||
|
|
├─────────────────────────────────────────────────┤
|
||
|
|
│ Blocks Tab: │
|
||
|
|
│ Layout Category │
|
||
|
|
│ → Section (Video BG) ← CLICK THIS │
|
||
|
|
├─────────────────────────────────────────────────┤
|
||
|
|
│ Layers Tab: │
|
||
|
|
│ → section[data-video-section] │
|
||
|
|
│ ├─ bg-video-wrapper (hidden from users) │
|
||
|
|
│ ├─ overlay │
|
||
|
|
│ └─ content │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ Canvas (Center) │
|
||
|
|
├─────────────────────────────────────────────────┤
|
||
|
|
│ │
|
||
|
|
│ ┌─────────────────────────────────────┐ │
|
||
|
|
│ │ ▶ Video Background Section │ │
|
||
|
|
│ │ │ │
|
||
|
|
│ │ [Dark overlay with placeholder] │ │
|
||
|
|
│ │ │ │
|
||
|
|
│ │ Click this section, then add URL │ │
|
||
|
|
│ │ in Settings panel → │ │
|
||
|
|
│ └─────────────────────────────────────┘ │
|
||
|
|
│ │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
|
||
|
|
┌─────────────────────────────────────────────────┐
|
||
|
|
│ Right Sidebar │
|
||
|
|
├─────────────────────────────────────────────────┤
|
||
|
|
│ [Styles] [Settings] ← CLICK SETTINGS │
|
||
|
|
├─────────────────────────────────────────────────┤
|
||
|
|
│ Video URL │
|
||
|
|
│ ┌───────────────────────────────────────┐ │
|
||
|
|
│ │ https://youtube.com/watch?v=... │ │
|
||
|
|
│ └───────────────────────────────────────┘ │
|
||
|
|
│ ↑ ONLY PLACE TO ENTER URL! │
|
||
|
|
├─────────────────────────────────────────────────┤
|
||
|
|
│ Edit HTML │
|
||
|
|
│ ┌───────────────────────────────────────┐ │
|
||
|
|
│ │ <section data-video-section...> │ │
|
||
|
|
│ │ ...HTML code... │ │
|
||
|
|
│ │ </section> │ │
|
||
|
|
│ └───────────────────────────────────────┘ │
|
||
|
|
│ [Apply Changes] [Cancel] │
|
||
|
|
└─────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Quick Start Checklist
|
||
|
|
|
||
|
|
- [ ] Add "Section (Video BG)" block to canvas
|
||
|
|
- [ ] Click on the section to select it
|
||
|
|
- [ ] Switch to **Settings** tab (right sidebar)
|
||
|
|
- [ ] Find **"Video URL"** field (should be first/only video input)
|
||
|
|
- [ ] Paste your YouTube/Vimeo/.mp4 URL
|
||
|
|
- [ ] Press Enter
|
||
|
|
- [ ] Wait 2 seconds for video to load
|
||
|
|
- [ ] Click play button if needed
|
||
|
|
- [ ] Video is now your background! ✅
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## Tips & Best Practices
|
||
|
|
|
||
|
|
### Performance
|
||
|
|
- Use `.mp4` files for best performance
|
||
|
|
- YouTube/Vimeo embed can be slower
|
||
|
|
- Videos should be < 20MB for fast loading
|
||
|
|
- Consider using poster image as fallback
|
||
|
|
|
||
|
|
### Design
|
||
|
|
- Keep overlay dark enough to read text
|
||
|
|
- Test text contrast (white text on dark overlay works best)
|
||
|
|
- Don't make overlay too dark (defeats purpose of video)
|
||
|
|
- Typical overlay: `rgba(0,0,0,0.6)` (60% black)
|
||
|
|
|
||
|
|
### Accessibility
|
||
|
|
- Add meaningful content over video (not just decorative)
|
||
|
|
- Ensure text is readable with video playing
|
||
|
|
- Provide alternative content for users with slow connections
|
||
|
|
- Consider adding "Pause Video" button for users
|
||
|
|
|
||
|
|
### SEO
|
||
|
|
- Video backgrounds don't help SEO (search engines ignore them)
|
||
|
|
- Focus on your text content for SEO
|
||
|
|
- Use descriptive headings and paragraphs over the video
|
||
|
|
- Don't rely solely on video to communicate key info
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
**Need more help?** Check the other documentation:
|
||
|
|
- `FIXES_2026-02-22.md` - All fixes applied today
|
||
|
|
- `HEADING_LEVEL_FEATURE.md` - How to use H1-H6 selector
|
||
|
|
- `WINDOWS_EXPORT_FIX.md` - Copy HTML export feature
|
||
|
|
- `MANUAL_TEST_RESULTS.md` - Testing checklist
|
||
|
|
|
||
|
|
**Enjoy your video backgrounds!** 🎥✨
|