edittool

홈페이지 배경 영상 자동재생 코드와 주의할 점

· edittool

홈페이지 첫 화면에 영상을 깔아 두면 분위기를 한눈에 전달할 수 있습니다. 그런데 "컴퓨터에서는 되는데 아이폰에서는 안 나와요"라는 문제가 자주 생깁니다. 이 글에서는 휴대폰까지 자동재생되는 코드와 함께 챙겨야 할 점을 정리합니다.

기본 코드

<video autoplay muted loop playsinline
  preload="auto" poster="/videos/hero-poster.jpg"
  class="hero-video">
  <source src="/videos/hero-web.mp4" type="video/mp4">
</video>

각 속성이 하는 일은 다음과 같습니다.

  • autoplay — 페이지가 열리면 바로 재생합니다.
  • muted — 가장 중요합니다. 크롬·사파리 모두 소리가 켜진 영상의 자동재생을 막습니다. 소리 트랙이 있어도 muted가 있으면 재생되지만, 애초에 소리를 빼 두면 용량도 줄어듭니다.
  • loop — 끝나면 처음부터 반복합니다.
  • playsinline — 아이폰에서 영상이 전체 화면으로 튀어나가지 않고 제자리에서 재생되게 합니다. 없으면 자동재생이 되지 않습니다.
  • poster — 영상이 준비되기 전, 또는 재생되지 않을 때 보여줄 이미지입니다.

화면을 꽉 채우는 CSS

.hero { position: relative; height: 70vh; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;   /* 비율을 유지한 채 잘라서 채움 */
}

object-fit: cover를 쓰면 화면 비율이 달라도 영상이 찌그러지지 않고 가장자리만 잘립니다. 휴대폰 세로 화면에서는 좌우가 많이 잘리므로, 중요한 피사체는 영상 가운데에 오도록 찍거나 잘라 두세요.

자동재생이 안 되는 경우도 대비하세요

코드를 제대로 써도 자동재생이 안 되는 상황이 있습니다.

  • 아이폰 저전력 모드 — 저전력 모드에서는 자동재생 영상이 재생되지 않습니다.
  • 데이터 절약 설정 — 일부 브라우저는 데이터 절약 모드에서 영상을 미리 받지 않습니다.

그래서 포스터 이미지가 사실상 필수입니다. 영상이 안 나와도 포스터가 보이면 디자인이 깨지지 않습니다. 영상 압축 도구는 결과와 함께 포스터 이미지(JPG)를 만들어 드립니다.

움직임을 싫어하는 사용자 배려

어지럼증 등으로 운영체제에서 "동작 줄이기"를 켠 사용자에게는 영상을 멈춰 두는 것이 좋습니다. 또, 5초 넘게 움직이는 콘텐츠에는 멈춤 버튼을 두는 것이 웹 접근성 지침(WCAG)의 권장 사항입니다.

<script>
  var v = document.querySelector('.hero-video');
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    v.removeAttribute('autoplay');
    v.pause();
  }
</script>

글자를 얹을 때

영상 위에 흰 글자를 얹으면 밝은 장면에서 글자가 안 보입니다. 영상 위에 반투명 검은 막을 한 겹 깔면 어느 장면에서든 읽을 수 있습니다.

.hero::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

체크리스트

  1. autoplay muted loop playsinline 네 가지를 모두 넣었나요?
  2. 영상은 720p, 10~20초, 2~4MB 안쪽인가요?
  3. 소리 트랙을 뺐나요?
  4. 포스터 이미지를 넣었나요?
  5. MP4(H.264) 형식인가요? (아이폰 MOV 그대로는 안 됩니다)