Skip to content
STYLESCAPE

Video

HTML5 video players, responsive containers and embeds.

Basic Video

HTML5 video element with native controls.

Video with Controls

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

Video with Poster

HTML 
<video class="ss-c-video" controls poster="/img/placeholder/1280x720.svg" width="100%">
            <source src="/media/sample.mp4" type="video/mp4" />
            Your browser does not support the video tag.
        </video>

Autoplay Muted

HTML 
<video class="ss-c-video" autoplay muted loop playsinline width="100%">
            <source src="/media/sample.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="ss-c-video_container ss-c-video_container--16x9">
            <video class="ss-c-video_container__video" controls>
                <source src="/media/sample.mp4" type="video/mp4" />
            </video>
        </div>

4:3 Aspect Ratio

HTML 
<div class="ss-c-video_container ss-c-video_container--4x3">
            <video class="ss-c-video_container__video" controls>
                <source src="/media/sample.mp4" type="video/mp4" />
            </video>
        </div>

21:9 Cinematic

HTML 
<div class="ss-c-video_container ss-c-video_container--21x9">
            <video class="ss-c-video_container__video" controls>
                <source src="/media/sample.mp4" type="video/mp4" />
            </video>
        </div>

Embedded Video

ss-c-video_container keeps an embedded player at a fixed aspect ratio. The demo embeds the local sample file; for a hosted player, point the iframe at the provider's embed URL (for example https://www.youtube-nocookie.com/embed/<id> or https://player.vimeo.com/video/<id>) and keep a descriptive title.

Embed Container (16:9)

HTML 
<div class="ss-c-video_container ss-c-video_container--16x9">
            <iframe
                class="ss-c-video_container__iframe"
                src="/media/sample.mp4"
                title="Sample video, embedded"
                loading="lazy"
                allow="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="ss-c-video_player">
            <video class="ss-c-video_player__video" id="customVideo">
                <source src="/media/sample.mp4" type="video/mp4" />
            </video>
            <div class="ss-c-video_player__overlay">
                <button type="button" class="ss-c-video_player__play" aria-label="Play">
                    <span aria-hidden="true">▶</span>
                </button>
            </div>
            <div class="ss-c-video_player__controls">
                <button type="button" class="ss-c-video_player__button" aria-label="Play/Pause">
                    <span aria-hidden="true">▶</span>
                </button>
                <div class="ss-c-video_player__progress">
                    <div class="ss-c-video_player__progress-bar"></div>
                </div>
                <span class="ss-c-video_player__time">0:00 / 3:45</span>
                <button type="button" class="ss-c-video_player__button" aria-label="Mute">
                    <span aria-hidden="true">◀</span>
                </button>
                <input
                    type="range"
                    class="ss-c-video_player__volume"
                    aria-label="Volume"
                    min="0"
                    max="100"
                    value="100"
                />
                <button type="button" class="ss-c-video_player__button" aria-label="Fullscreen">
                    <span aria-hidden="true">□</span>
                </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="ss-c-video_gallery">
            <article class="ss-c-video_card">
                <div class="ss-c-video_card__thumbnail">
                    <img src="/img/placeholder/800x450.svg" alt="" />
                    <span class="ss-c-video_card__duration">3:45</span>
                    <button type="button" class="ss-c-video_card__play" aria-label="Play video: Video Title">
                        <span aria-hidden="true">▶</span>
                    </button>
                </div>
                <div class="ss-c-video_card__info">
                    <h4 class="ss-c-video_card__title">Video Title</h4>
                    <p class="ss-c-video_card__meta">1.2K views • 2 days ago</p>
                </div>
            </article>

            <article class="ss-c-video_card">
                <div class="ss-c-video_card__thumbnail">
                    <img src="/img/placeholder/800x450.svg" alt="" />
                    <span class="ss-c-video_card__duration">5:20</span>
                    <button type="button" class="ss-c-video_card__play" aria-label="Play video: Another Video">
                        <span aria-hidden="true">▶</span>
                    </button>
                </div>
                <div class="ss-c-video_card__info">
                    <h4 class="ss-c-video_card__title">Another Video</h4>
                    <p class="ss-c-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="ss-c-video_hero" style="background: #111111">
            <video
                class="ss-c-video_hero__background"
                autoplay
                muted
                loop
                playsinline
            >
                <source src="/media/sample.mp4" type="video/mp4" />
            </video>
            <div class="ss-c-video_hero__overlay"></div>
            <div class="ss-c-video_hero__content">
                <h4>Welcome</h4>
                <p>Engaging hero section with video background</p>
                <button class="ss-c-button ss-c-button--primary">Get Started</button>
            </div>
        </div>