---
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).