모바일에서 동영상 배경이 재생되지 않을 때 – ZenBlocks buttonBasic
결론
모바일에서 동영상 배경이 재생되지 않는 가장 큰 이유는 **브라우저의 자동재생 정책 제한**입니다. 폴백 이미지를 함께 설정하면 표시 안정성을 확보할 수 있습니다.
—
원인
1. iOS Safari 자동재생 제한
2. Android 데이터 절약 모드 제한
3. 동영상 파일 용량 과다
4. 코덱 호환성 문제—
해결 절차
### 1단계: 폴백 이미지 설정
1. 배경 설정 패널을 엽니다.
2. 동영상과 함께 정적 폴백 이미지를 설정합니다.### 2단계: 동영상 최적화
1. 파일 크기를 **5MB 이하**(권장 2MB 이하)로 줄입니다.
2. 모바일 기준 해상도는 **720p 이하**를 권장합니다.
3. **MP4(H.264)** 형식을 사용합니다.
4. 오디오 트랙은 제거합니다.### 3단계: 브라우저 제한 이해
| 환경 | 주요 제한 |
|—|—|
| iOS Safari | autoplay에 `muted` + `playsinline` 필요 |
| iOS 저전력 모드 | autoplay 비활성화 가능 |
| Android 데이터 절약 | 자동 로딩 제한 가능 |
| 구형 브라우저 | 코덱 지원 제한 |### 4단계: 기기별 분리 적용
1. 데스크톱은 동영상 배경 사용
2. 태블릿/모바일은 필요 시 정적 이미지 사용
3. 반응형 설정으로 기기별 배경을 분리합니다.—
주의사항
– 동영상 배경은 LCP/Core Web Vitals에 영향을 줄 수 있습니다.
– 오버레이 + 폴백 이미지를 함께 사용하면 표시 안정성이 높아집니다.—
관련 설정
– [배경 설정](../background/)
– [표시 설정](../display/)