Video Player Examples

Interactive demos showcasing video player capabilities

Example 1: YouTube Video

Lazy-loaded YouTube video with poster thumbnail. Click play to load the iframe.

YouTube Video • HTML
<div class="rsl-video-player"
     data-rsl-video
     data-video-src="https://www.youtube.com/watch?v=M7lc1UVf-VE"
     data-video-poster="https://img.youtube.com/vi/M7lc1UVf-VE/maxresdefault.jpg"
     data-video-title="Big Buck Bunny - Open Source Film"
     data-video-size="lg">
</div>

Example 2: Vimeo Video

Vimeo video with lazy loading and custom poster image.

Vimeo Video • HTML
<div class="rsl-video-player"
     data-rsl-video
     data-video-src="https://vimeo.com/76979871"
     data-video-poster="poster-image.jpg"
     data-video-title="Vimeo Demo Video"
     data-video-size="lg">
</div>

Example 3: Self-Hosted Video

Self-hosted MP4 video with full custom controls including progress bar, volume, and fullscreen.

Self-Hosted MP4 • HTML
<div class="rsl-video-player"
     data-rsl-video
     data-video-src="https://www.w3schools.com/html/mov_bbb.mp4"
     data-video-title="Big Buck Bunny Sample"
     data-video-size="lg">
</div>

Example 4: Aspect Ratios

Video players support multiple aspect ratios: 16:9, 4:3, 1:1, 9:16, and 21:9.

16:9 (Default)

1:1 (Square)

Aspect Ratios • HTML
<!-- 16:9 Widescreen (default) -->
<div class="rsl-video-player" data-rsl-video
     data-video-src="video.mp4"
     data-video-aspect="16:9"></div>

<!-- 1:1 Square -->
<div class="rsl-video-player" data-rsl-video
     data-video-src="video.mp4"
     data-video-aspect="1:1"></div>

<!-- Other options: 4:3, 9:16, 21:9 -->

Example 5: Size Variants

Control the maximum width of your video player with size variants.

Small (max-width: 400px)

Medium (max-width: 640px)

Size Variants • HTML
<!-- Small: 400px max-width -->
<div class="rsl-video-player" data-video-size="sm">...</div>

<!-- Medium: 640px max-width -->
<div class="rsl-video-player" data-video-size="md">...</div>

<!-- Large: 960px max-width -->
<div class="rsl-video-player" data-video-size="lg">...</div>

<!-- Full: 100% width -->
<div class="rsl-video-player" data-video-size="full">...</div>

Example 6: Programmatic Creation

Create video players using JavaScript API.

Programmatic API • JavaScript
// Create a video player programmatically
const player = RSL.VideoPlayer.create('#my-container', {
    src: 'https://www.youtube.com/watch?v=M7lc1UVf-VE',
    poster: 'https://img.youtube.com/vi/M7lc1UVf-VE/maxresdefault.jpg',
    title: 'Big Buck Bunny',
    aspect: '16:9'
});

// Control the player
player.play();
player.pause();
player.seek(30);
player.setVolume(0.5);

// Destroy when done
player.destroy();

Example 7: Video Gallery

Multiple videos in a responsive grid layout.

Big Buck Bunny

Open source animated short film

YouTube Video

Embedded from YouTube

Vimeo Video

Embedded from Vimeo

Video Gallery • HTML
<div class="slot-layout" data-cols-xs="1" data-cols-md="2" data-cols-lg="3">
    <div class="slot-item">
        <div class="rsl-video-player"
             data-rsl-video
             data-video-src="video1.mp4"
             data-video-title="Video 1"></div>
    </div>
    <div class="slot-item">
        <div class="rsl-video-player"
             data-rsl-video
             data-video-src="video2.mp4"
             data-video-title="Video 2"></div>
    </div>
    <!-- More videos... -->
</div>

Keyboard Shortcuts

Test keyboard navigation on any video player above. Focus the player and try these keys: