### Basic Video

HTML5 video element with native controls.

#### Video with Controls

Your browser does not support the video tag.
HTML

    <video class="video" controls width="100%">
                <source src="video.mp4" type="video/mp4" />
                <source src="video.webm" type="video/webm" />
                Your browser does not support the video tag.
            </video>

#### Video with Poster

Your browser does not support the video tag.
HTML

    <video class="video" controls poster="thumbnail.jpg" width="100%">
                <source src="video.mp4" type="video/mp4" />
                Your browser does not support the video tag.
            </video>

#### Autoplay Muted

Your browser does not support the video tag.
HTML

    <video class="video" autoplay muted loop playsinline width="100%">
                <source src="background-video.mp4" type="video/mp4" />
                Your browser does not support the video tag.
            </video>

### Video Container

Responsive video wrapper with aspect ratio.

#### 16:9 Aspect Ratio

HTML

    <div class="video_container video_container--16x9">
                <video class="video_container__video" controls>
                    <source src="video.mp4" type="video/mp4" />
                </video>
            </div>

#### 4:3 Aspect Ratio

HTML

    <div class="video_container video_container--4x3">
                <video class="video_container__video" controls>
                    <source src="video.mp4" type="video/mp4" />
                </video>
            </div>

#### 21:9 Cinematic

HTML

    <div class="video_container video_container--21x9">
                <video class="video_container__video" controls>
                    <source src="video.mp4" type="video/mp4" />
                </video>
            </div>

### Embedded Video

YouTube and Vimeo embedded players.

#### YouTube Embed

HTML

    <div class="video_container video_container--16x9">
                <iframe
                    class="video_container__iframe"
                    src="https://www.youtube.com/embed/VIDEO_ID"
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                ></iframe>
            </div>

#### Vimeo Embed

HTML

    <div class="video_container video_container--16x9">
                <iframe
                    class="video_container__iframe"
                    src="https://player.vimeo.com/video/VIDEO_ID"
                    title="Vimeo video player"
                    frameborder="0"
                    allow="autoplay; fullscreen; picture-in-picture"
                    allowfullscreen
                ></iframe>
            </div>

### Custom Controls

Video player with custom control overlay.

#### Custom Player UI

0:00 / 3:45
HTML

    <div class="video_player">
                <video class="video_player__video" id="customVideo">
                    <source src="video.mp4" type="video/mp4" />
                </video>
                <div class="video_player__overlay">
                    <button class="video_player__play" aria-label="Play">
                        ▶
                    </button>
                </div>
                <div class="video_player__controls">
                    <button class="video_player__button" aria-label="Play/Pause">
                        ▶
                    </button>
                    <div class="video_player__progress">
                        <div class="video_player__progress-bar"></div>
                    </div>
                    <span class="video_player__time">0:00 / 3:45</span>
                    <button class="video_player__button" aria-label="Mute">
                        🔊
                    </button>
                    <input
                        type="range"
                        class="video_player__volume"
                        min="0"
                        max="100"
                        value="100"
                    />
                    <button class="video_player__button" aria-label="Fullscreen">
                        ⛶
                    </button>
                </div>
            </div>

### Video Gallery

Grid of video thumbnails.

#### Video Grid

3:45

#### Video Title

1.2K views • 2 days ago

5:20

#### Another Video

3.5K views • 1 week ago

HTML

    <div class="video_gallery">
                <article class="video_card">
                    <div class="video_card__thumbnail">
                        <img src="thumb1.jpg" alt="Video thumbnail" />
                        <span class="video_card__duration">3:45</span>
                        <button class="video_card__play" aria-label="Play video">
                            ▶
                        </button>
                    </div>
                    <div class="video_card__info">
                        <h4 class="video_card__title">Video Title</h4>
                        <p class="video_card__meta">1.2K views • 2 days ago</p>
                    </div>
                </article>

                <article class="video_card">
                    <div class="video_card__thumbnail">
                        <img src="thumb2.jpg" alt="Video thumbnail" />
                        <span class="video_card__duration">5:20</span>
                        <button class="video_card__play" aria-label="Play video">
                            ▶
                        </button>
                    </div>
                    <div class="video_card__info">
                        <h4 class="video_card__title">Another Video</h4>
                        <p class="video_card__meta">3.5K views • 1 week ago</p>
                    </div>
                </article>
            </div>

### Background Video

Full-width video background with overlay.

#### Hero with Video Background

# Welcome

Engaging hero section with video background

HTML

    <div class="video_hero">
                <video
                    class="video_hero__background"
                    autoplay
                    muted
                    loop
                    playsinline
                >
                    <source src="hero-video.mp4" type="video/mp4" />
                </video>
                <div class="video_hero__overlay"></div>
                <div class="video_hero__content">
                    <h1>Welcome</h1>
                    <p>Engaging hero section with video background</p>
                    <button class="button button--primary">Get Started</button>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!