---
id: css-rwd-videos
title: "CSS RWD Videos"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["responsive video", "max-width video", "RWD videos", "video scaling", "fluid video"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "responsive", "video"]
raw_sources: ["https://www.w3schools.com/css/css_rwd_videos.asp"]
applied_in: []
github_commit: ""
---

# [[CSS RWD Videos]]

## 🎯 한 줄 통찰 (One-line insight)
A video is made responsive the same way an image is — `width: 100%` scales it up and down with its container, while `max-width: 100%` (with `height: auto`) scales it down without ever enlarging it beyond its original size. [S1]

## 🧠 핵심 개념 (Core concepts)
- **`width: 100%`** — set on the video, makes it responsive and scale up and down with the container. [S1]
- **`max-width: 100%`** — scales the video down if needed but never up to be larger than its original size; a better solution in many cases. [S1]
- **`height: auto`** — paired with either width rule so the video keeps its proportions. [S1]
- **Fills available space** — a video added with this styling will be resized to always take up all the available space. [S1]

## 🧩 추출된 패턴 (Extracted patterns)
- **Fluid video** — `video { max-width: 100%; height: auto; }` is the safe default, mirroring the responsive-image pattern. [S1]

## 📖 세부 내용 (Details)
**Using The width Property** — If the `width` property is set to 100%, the video player will be responsive and scale up and down: [S1]
```css
video {
  width: 100%;
  height: auto;
}
```
Notice that in the example above, the video player can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the `max-width` property instead. [S1]

**Using The max-width Property** — If the `max-width` property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size: [S1]
```css
video {
  max-width: 100%;
  height: auto;
}
```

**Add a Video to The Example Web Page** — Add a video to the example web page we used in the previous chapter. The video will be resized to always take up all the available space, using the same `max-width` styling approach. The Example box for this section presents only a "Try it Yourself" link with no additional inline code beyond the styling above — Not found in source. [S1]

## 🛠️ 적용 사례 (Applied in summary)
The video examples apply the responsive styling to the example web page from the previous chapter so the video always takes up all available space. No external project/commit applications found in the source.

## 💻 코드 패턴 (Code patterns)
Fluid video, no upscaling (language: CSS):
```css
video {
  max-width: 100%;
  height: auto;
}
```
Scale-with-container video (language: CSS):
```css
video {
  width: 100%;
  height: auto;
}
```

## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`width: 100%` vs `max-width: 100%`** — `width: 100%` scales the video both up and down (can exceed original size); `max-width: 100%` scales down only and never beyond the original size — described as a better solution in many cases. [S1]

## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.

## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)

## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS RWD Images]], [[CSS RWD Media Queries]], [[CSS RWD Viewport]]
- **참조 맥락:** Applies the same fluid-media technique as responsive images to the `<video>` element.

## 📚 출처 (Sources)
- [S1] W3Schools — CSS RWD Videos — https://www.w3schools.com/css/css_rwd_videos.asp

## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS RWD Videos" page (Astra wiki-curation, P-Reinforce v3.1 format).