Video
Video
Video displays video content in a responsive inline wrapper with safe URL sanitization via the safe pipe.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Width | 100% |
| Height (mobile) | 181px |
| Height (desktop, ≥768px) | 560px |
| Border Radius | 20px |
| Margin | Auto (centered) |
| Layout | video-wrapper container |
Responsive Views
Section titled “Responsive Views”Full-width iframe at 181px height, 20px border radius
Full-width iframe at 560px height (≥768px breakpoint), 20px border radius
iframe Permissions
Section titled “iframe Permissions”| Attribute | Value |
|---|---|
allow | accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share |
allowfullscreen | Enabled |
title | Bound from data.title |
src | Bound from data.video via safe:'resourceUrl' pipe |
Supported Platforms
Section titled “Supported Platforms”| Platform | URL Format |
|---|---|
| YouTube | https://www.youtube.com/embed/VIDEO_ID |
| Vimeo | https://player.vimeo.com/video/VIDEO_ID |
| Self-hosted | Direct video URL from your domain |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Playing tutorial videos
- Showing promotional content
- Product demonstrations
- When video needs focused viewing
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Use HTTPS URLs for security | Embed non-HTTPS content |
Provide descriptive titles via data.title | Skip the title attribute |
| Test on target platforms | Ignore mobile data usage |
| Consider mobile bandwidth | Skip accessibility considerations |
Security Features
Section titled “Security Features”| Feature | Description |
|---|---|
| URL Sanitization | safe:'resourceUrl' pipe prevents XSS attacks |
| HTTPS Only | Encrypted connections required |
| Trusted Sources | Only known video platforms allowed |