YouTube Embed Demo

YouTube Embed Use Cases

Use Case 1: Basic Embed (Default Settings)

Expected Behavior:

• All default parameters applied
• No autoplay, no loop, controls visible
• Red progress bar, fullscreen enabled

---

Use Case 2: Loop Single Video

Expected Behavior:

• Video loops continuously
• Playlist parameter automatically set to video ID
• URL contains: loop=1&playlist=LJBQ29h7rMM

---

Use Case 3: Playlist with Next Videos (No Loop)

Expected Behavior:

• Plays main video first, then next videos in sequence
• Main video ID prepended to playlist automatically
• URL contains: playlist=LJBQ29h7rMM,qhs-xppFRgE,abc123

---

Use Case 4: Loop with Playlist

Expected Behavior:

• Entire playlist loops continuously
• All videos play in sequence, then repeat
• URL contains: loop=1&playlist=LJBQ29h7rMM,qhs-xppFRgE,abc123

---

Use Case 5: Autoplay with Mute

Expected Behavior:

• Video starts playing automatically on page load
• Audio is muted (required for autoplay in most browsers)
• URL contains: autoplay=1&mute=1

---

Use Case 6: Custom Color (White Progress Bar)

Expected Behavior:

• Progress bar and controls use white color scheme
• Valid values: ‘red’ or ‘white’
• URL contains: color=white

---

Use Case 7: Hide Controls

Expected Behavior:

• Player controls are hidden
• Video can still be controlled via API or keyboard
• URL contains: controls=0

---

Use Case 8: Start at Specific Time

Expected Behavior:

• Video begins playing at 30 seconds
• Value in seconds (positive integer)
• URL contains: start=30

---

Use Case 9: End at Specific Time

Expected Behavior:

• Video stops playing at 60 seconds
• Value in seconds (positive integer)
• URL contains: end=60

---

Use Case 10: Time Range (Start + End)

Expected Behavior:

• Video plays from 10 seconds to 50 seconds
• Creates a 40-second clip
• URL contains: start=10&end=50

---

Use Case 11: Closed Captions Enabled

Expected Behavior:

• Closed captions displayed by default (if available)
• User can still toggle captions off
• URL contains: cc_load_policy=1

---

Use Case 12: Disable Keyboard Controls

Expected Behavior:

• Keyboard shortcuts disabled (space, arrows, etc.)
• Mouse controls still work
• URL contains: disablekb=1

---

Use Case 13: Disable Fullscreen Button

Expected Behavior:

• Fullscreen button hidden from controls
• Video remains in embedded size
• URL contains: fs=0

---

Use Case 14: Show Related Videos from Any Channel

Expected Behavior:

• After video ends, shows related videos from all channels
• Default (rel=0) only shows videos from same channel
• URL contains: rel=1

---

Use Case 15: iOS Inline Playback

Expected Behavior:

• Video plays inline on iOS devices instead of fullscreen
• Only affects iOS Safari
• URL contains: playsinline=1

---

Use Case 16: Complex Combination - Auto-looping Clip

Expected Behavior:

• Autoplays muted from 30s to 35s
• Loops the 5-second clip continuously
• No fullscreen button
• Perfect for background video clips

---

Use Case 17: Multi-video Playlist

Expected Behavior:

• Plays 4 videos in sequence
• No fullscreen button
• Stops after last video (no loop)
• URL contains: playlist=LJBQ29h7rMM,qhs-xppFRgE,gKWjGVWGCgo,hmUyEDG7Jy0

---

Use Case 18: Looping Playlist

Expected Behavior:

• Plays 3 videos in sequence
• After last video, returns to first and repeats
• No fullscreen button
• URL contains: loop=1&playlist=LJBQ29h7rMM,qhs-xppFRgE,gKWjGVWGCgo

---

Use Case 19: Multiple Embeds on Same Page

{% include embed/youtube.html id='LJBQ29h7rMM' %}

Expected Behavior:

• All three embeds work independently
• Each has its own configuration
• No conflicts or interference between embeds

---

Use Case 20: Minimal Embed (Clean Player)

Expected Behavior:

• Minimal interface with no controls
• No related videos shown
• No keyboard interaction
• Clean, distraction-free viewing

---

Use Case 21: Presentation Mode

Expected Behavior:

• Auto-plays muted in a loop
• No visible controls
• Perfect for background/ambient video in presentations

---

Use Case 22: Accessible Video

Expected Behavior:

• Captions enabled by default
• Full controls available
• Keyboard navigation enabled (default)
• Optimized for accessibility

---

Notes

• Autoplay Limitation: autoplay=1 only works reliably when mute=1 is also set (browser policy)
• Loop Requirement: loop=1 requires a playlist parameter, which is automatically added by the code
• Color Options: Only ‘red’ (default) and ‘white’ are valid values
• Time Values: start and end accept positive integers (seconds)
• Playlist Order: Main video ID is always prepended automatically to next_id

---

Quick Reference

Parameter	Type	Default	Description
id	string	required	YouTube video ID
autoplay	0 or 1	0	Auto-play on load (needs mute=1)
cc_load_policy	0 or 1	0	Show captions by default
color	‘red’ or ‘white’	‘red’	Progress bar color
controls	0 or 1	1	Show player controls
disablekb	0 or 1	0	Disable keyboard controls
end	integer	0	End time in seconds
fs	0 or 1	1	Show fullscreen button
loop	0 or 1	0	Loop video/playlist
mute	0 or 1	0	Start muted
playsinline	0 or 1	0	iOS inline playback
rel	0 or 1	0	Show related videos (0=same channel only)
start	integer	0	Start time in seconds
next_id	string	empty	Comma-separated video IDs for playlist