docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
@@ -0,0 +1,118 @@
+---
+id: html-youtube
+title: "HTML YouTube"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["YouTube embed", "HTML YouTube video", "embed YouTube iframe", "YouTube player parameters", "HTML video YouTube"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.89
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["html", "web", "frontend", "w3schools", "youtube", "video", "iframe"]
+raw_sources: ["https://www.w3schools.com/html/html_youtube.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[HTML YouTube]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+The easiest way to play videos in HTML is to embed them from YouTube using an `<iframe>` whose `src` points to the YouTube embed URL, avoiding the need to convert videos to multiple formats yourself. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **YouTube as a video host** — instead of supporting many video formats in your own player, you can let YouTube serve and play the video. [S1]
+- **Video ID** — every YouTube video has an id (e.g. `tgbNymZ7vqY`) that identifies which video to embed. [S1]
+- **The `<iframe>` embed** — an `<iframe>` element with `width`, `height`, and a `src` pointing to `https://www.youtube.com/embed/<VIDEO_ID>` displays the player. [S1]
+- **URL parameters control behavior** — autoplay, mute, loop, and controls are configured through query-string parameters appended to the embed URL. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Embed pattern** — `https://www.youtube.com/embed/<VIDEO_ID>` is the base; append `?param=value&param=value` for options. [S1]
+- **Autoplay must be muted** — Chromium browsers block autoplay in most cases, but *muted* autoplay is always allowed, so pair `autoplay=1` with `mute=1`. [S1]
+- **Loop needs a playlist** — to loop a single video, set `playlist=<VIDEO_ID>` together with `loop=1`. [S1]
+- **Default-on controls** — `controls=1` (the default) shows player controls; `controls=0` hides them. [S1]
+
+## 📖 세부 내용 (Details)
+**Basic YouTube embed**
+To embed a YouTube video you need the video id and an `<iframe>` with the embed `src` plus `width`/`height`: [S1]
+```html
+<iframe width="420" height="315"
+src="https://www.youtube.com/embed/tgbNymZ7vqY">
+</iframe>
+```
+
+**Autoplay + Mute**
+You can let your video start playing automatically when a user visits the page by adding `autoplay=1` to the YouTube URL. Chromium browsers do not allow autoplay in most cases; however, muted autoplay is always allowed. Add `mute=1` after `autoplay=1` to let your video start playing automatically (but muted). [S1]
+```html
+<iframe width="420" height="315"
+src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
+</iframe>
+```
+
+**Loop**
+Use the loop parameter to repeat playback. To loop a single video you must also pass it as the playlist. [S1]
+```html
+<iframe width="420" height="315"
+src="https://www.youtube.com/embed/tgbNymZ7vqY?playlist=tgbNymZ7vqY&loop=1">
+</iframe>
+```
+
+| Parameter value | Meaning |
+|---|---|
+| `loop=0` (default) | The video will play only once |
+| `loop=1` | The video will loop (forever) |
+
+**Controls**
+The `controls` parameter toggles the player controls. [S1]
+```html
+<iframe width="420" height="315"
+src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
+</iframe>
+```
+
+| Parameter value | Meaning |
+|---|---|
+| `controls=0` | Player controls does not display |
+| `controls=1` (default) | Player controls is displayed |
+
+## 🛠️ 적용 사례 (Applied in summary)
+The embed snippets above are the canonical applied examples: a basic embedded player and three configured variants (muted autoplay, looping, hidden controls). No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Generic embed (HTML):
+```html
+<iframe width="420" height="315"
+src="https://www.youtube.com/embed/VIDEO_ID?PARAMETERS">
+</iframe>
+```
+Muted autoplay (HTML):
+```html
+<iframe width="420" height="315"
+src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
+</iframe>
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source. Note the browser-policy constraint that shapes usage: unmuted autoplay is blocked in most Chromium browsers, so reliable autoplay requires `mute=1`. [S1]
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.89
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[HTML Tutorial]]
+- **관련 개념:** [[HTML Video]], [[HTML Audio]], [[HTML Iframes]], [[HTML Media]]
+- **참조 맥락:** Referenced whenever a page needs to display video without self-hosting media files.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — HTML YouTube — https://www.w3schools.com/html/html_youtube.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "HTML YouTube" page (Astra wiki-curation, P-Reinforce v3.1 format).