# 동영상

| 항목 | 경로 |
|------|------|
| 데모 | `video.html` |
| CSS | `css/video.css` |
| 자막 예 | `media/demo-captions.vtt` |
| 관련 | 표 본문 유튜브 → [table.md](./table.md) `.tbl-view-video` |

---

## 필수 원칙

| 항목 | 권장 |
|------|------|
| 자동재생 | **금지** (소리·영상 모두) |
| 컨트롤 | `controls` 필수 (키보드로 재생·정지·탐색) |
| 자막 | 대사·중요 효과음 → `<track kind="captions">` |
| 대체 | 스크립트/원고 (`.media-transcript`) |
| iframe | `title` 필수 · `youtube-nocookie.com` 권장 |
| 새 창 | 영상 페이지로 보내는 링크면 `.dn`(새 창) / `title` |

---

## 네이티브 video

```html
<figure class="media-video-block">
  <div class="media-video">
    <video controls playsinline preload="metadata"
      poster="">
      <source src="./media/sample.mp4" type="video/mp4">
      <track kind="captions" srclang="ko" label="한국어"
        src="./media/demo-captions.vtt" default>
      이 브라우저에서는 영상을 재생할 수 없습니다.
      <a href="./media/sample.mp4">영상 파일 다운로드</a>
    </video>
  </div>
  <figcaption class="media-video__caption">영상 제목 — 짧은 설명</figcaption>
</figure>

<details class="media-transcript">
  <summary>영상 스크립트(대체 텍스트)</summary>
  <div class="media-transcript__body">
    <p>…대사·나레이션 전문…</p>
  </div>
</details>
```

- `autoplay` / `muted` 자동재생 조합 사용하지 않음
- `playsinline` — 모바일에서 전체화면 강제 완화
- 자막 파일은 WebVTT (`.vtt`)

---

## 유튜브(iframe)

```html
<div class="media-video">
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID?rel=0"
    title="영상 제목 — 유튜브 플레이어"
    allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>
```

- `title`에 **영상 내용**을 넣을 것 (`youtube video` 같은 일반명 금지)
- 자동재생 파라미터(`autoplay=1`) 사용 금지
- 가능하면 유튜브 쪽 자막(CC)도 확인

---

## 접근성 체크

- [ ] 자동재생 없음
- [ ] 키보드로 재생 컨트롤 조작 가능
- [ ] 자막 또는 동등한 스크립트 제공
- [ ] iframe `title` / video에 설명(`figcaption` 또는 인접 제목)
- [ ] `prefers-reduced-motion` 사용자에게 자동 재생·과도한 모션 없음

---

## 복사 패키지

```
css/video.css
media/*.vtt
마크업: video.html
(실제 mp4/유튜브 ID는 프로젝트 파일로 교체)
```