# Video Carousel Validation Report

**Last Updated:** 2026-02-04

## Automated Validation Results

### Code Structure Validation ✅

- ✅ All 15 videos found in array
- ✅ Carousel section HTML present
- ✅ Alpine.js carousel function implemented
- ✅ Lazy loading with IntersectionObserver
- ✅ Privacy-enhanced YouTube domain (`youtube-nocookie.com`)
- ✅ All accessibility features present (ARIA labels, keyboard navigation, role attributes, tabindex)
- ✅ Carousel CSS found and minified

### Schema Validation ✅

- ✅ 15 VideoObject entries in `@graph` (one per carousel video)
- ✅ WebPage.video references all 15 videos
- ✅ All required fields present (name, description, thumbnailUrl, contentUrl, embedUrl, uploadDate)
- ✅ uploadDate ISO 8601 with timezone (Google requirement)
- ✅ Optional fields: inLanguage, isPartOf, publisher; optional per-video duration_iso/upload_date in data
- ✅ All URLs validated and correct; privacy-enhanced embed URL (youtube-nocookie.com)
- ✅ Run `php v2/scripts/validate-schema.php` to validate all VideoObjects and timezone

### Content Quality Validation ✅

- ✅ No AI content tells found
- ✅ Uses informal "du" tone
- ✅ Natural German phrasing
- ✅ Conversational tone
- ✅ Benefit-focused language
- ✅ Natural flow and structure

**Note:** The Ordio mention count warning (68 mentions) is counting the entire page, not just the carousel section. The carousel section itself contains only 1-2 appropriate mentions.

## Manual Testing Required

The following tests require manual browser testing and cannot be automated:

### 1. Functional Testing

- [ ] Carousel displays correctly on desktop (3 videos visible)
- [ ] Carousel displays correctly on tablet (2 videos visible)
- [ ] Carousel displays correctly on mobile (1 video visible)
- [ ] Navigation arrows work correctly (desktop only)
- [ ] Pagination dots work correctly
- [ ] Auto-rotation works (6 second interval)
- [ ] Auto-rotation stops on user interaction
- [ ] Videos load when play button clicked
- [ ] Videos play correctly in iframe
- [ ] Touch/swipe works on mobile

### 2. Performance Testing

- [ ] Run Lighthouse audit (target: >90 score)
- [ ] Check LCP < 2.5s
- [ ] Check FID < 100ms
- [ ] Check CLS < 0.1
- [ ] Verify videos don't load until clicked (Network tab)
- [ ] Verify thumbnails lazy load correctly

### 3. Accessibility Testing

- [ ] Test keyboard navigation (arrow keys, Enter, Space)
- [ ] Test with screen reader (VoiceOver/NVDA)
- [ ] Verify focus indicators visible
- [ ] Test tab navigation order
- [ ] Verify ARIA labels read correctly

### 4. Cross-Browser Testing

- [ ] Chrome (desktop and mobile)
- [ ] Safari (desktop and mobile)
- [ ] Firefox (desktop)
- [ ] Edge (desktop)

### 5. Video Playback Testing

- [ ] Videos play correctly in all browsers
- [ ] Autoplay works when clicked
- [ ] Video controls accessible
- [ ] Fullscreen mode works
- [ ] Videos pause/play correctly

## Schema Testing

### Google Rich Results Test

1. Navigate to: https://search.google.com/test/rich-results
2. Enter canonical URL: `https://www.ordio.com/kunden`
3. Verify VideoObject schema (multiple videos) appears
4. Check for any warnings or errors (e.g. uploadDate timezone)

### Live page validation (optional)

Run `python3 v2/scripts/dev-helpers/validate-kunden-video-schema.py --url https://www.ordio.com` after deploy to validate VideoObject count and required fields on the live URL.

## Performance Baseline

### Expected Metrics

- **Page Load Time**: < 3 seconds
- **LCP**: < 2.5s
- **FID**: < 100ms
- **CLS**: < 0.1
- **Lighthouse Score**: > 90 (mobile and desktop)

### Optimization Features

- ✅ Lazy loading for videos (load on click)
- ✅ Lazy loading for thumbnails (IntersectionObserver)
- ✅ Privacy-enhanced YouTube domain
- ✅ GPU-accelerated CSS animations
- ✅ Minified CSS (28.8% reduction)
- ✅ Optimized iframe loading

## Known Issues

None identified during automated validation.

## Recommendations

1. **Monitor Performance**: Track page load times and video engagement metrics
2. **A/B Testing**: Consider testing different video orders or carousel configurations
3. **Analytics**: Video play events are tracked via dataLayer (if GTM configured)
4. **Schema**: One VideoObject per carousel video is implemented; optional per-video `duration_iso` and `upload_date` in `$spotlight_videos` are supported.

## Validation Scripts

1. `v2/scripts/validate-schema.php` - Runs the page, extracts JSON-LD, validates all VideoObjects (required fields, uploadDate timezone, WebPage.video). Run before deployment.
2. `v2/scripts/dev-helpers/validate-kunden-video-schema.py` - Fetches live URL and validates VideoObject count and required fields. Use after deploy with `--url https://www.ordio.com` or `--url http://localhost:8003`.

Run `php v2/scripts/validate-schema.php` before deployment to ensure schema is correct.