Video Player V2 API Examples | RSL Documentation

V2 Configuration Options

The Video Player component uses semantic type: "video-player" configuration in the V2 API:

Property	Type	Description
`src`	String	Required. Video URL (YouTube, Vimeo, or direct MP4/WebM)
`title`	String	Video title for accessibility
`poster`	String	Poster image URL (auto-generated for YouTube if not provided)
`aspect`	String	Aspect ratio: "16:9" (default), "4:3", "1:1", "21:9"
`size`	String	Player size: "sm" (400px), "md" (640px), "lg" (960px), "full"
`autoplay`	Boolean	Auto-play video (requires muted for browser compliance)
`muted`	Boolean	Start video muted
`loop`	Boolean	Loop video playback
`controls`	Boolean	Show player controls (default: true)
`start`	Number	Start time in seconds
`end`	Number	End time in seconds
`captions`	String	URL to WebVTT captions file

Example 1: YouTube Video

Create a YouTube video player using the V2 semantic API with automatic poster image generation:

RSL.JSONLayout.renderLayout('#demo-youtube', {
    version: 2,
    layoutId: 'youtube-demo',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "video-player",
            src: "https://www.youtube.com/watch?v=M7lc1UVf-VE",
            title: "Big Buck Bunny",
            size: "lg"
        }
    }]
});

Example 2: Vimeo Video

Embed Vimeo videos with the same simple configuration:

RSL.JSONLayout.renderLayout('#demo-vimeo', {
    version: 2,
    layoutId: 'vimeo-demo',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "video-player",
            src: "https://vimeo.com/76979871",
            title: "Vimeo Demo Video",
            size: "lg",
            aspect: "16:9"
        }
    }]
});

Example 3: Self-Hosted Video

For direct MP4/WebM files, RSL renders a custom HTML5 video player with full controls:

RSL.JSONLayout.renderLayout('#demo-selfhosted', {
    version: 2,
    layoutId: 'selfhosted-demo',
    breakpoints: { xs: 1 },
    items: [{
        content: {
            type: "video-player",
            src: "https://www.w3schools.com/html/mov_bbb.mp4",
            title: "Big Buck Bunny Sample",
            size: "lg",
            loop: true
        }
    }]
});

Keyboard Shortcuts

Self-hosted videos support full keyboard navigation: Space/K (play/pause), Arrow keys (seek), M (mute), F (fullscreen), 0-9 (jump to percentage).

Example 4: Video Gallery Grid

Create responsive video galleries with the grid layout:

RSL.JSONLayout.renderLayout('#demo-gallery', {
    version: 2,
    layoutId: 'gallery-demo',
    breakpoints: { xs: 1, md: 2, lg: 3 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "Big Buck Bunny"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://www.youtube.com/watch?v=M7lc1UVf-VE",
                title: "YouTube Video",
                poster: "https://img.youtube.com/vi/M7lc1UVf-VE/mqdefault.jpg"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://vimeo.com/76979871",
                title: "Vimeo Video"
            }
        }
    ]
});

Example 5: Aspect Ratios

Videos support multiple aspect ratios for different content types:

RSL.JSONLayout.renderLayout('#demo-aspects', {
    version: 2,
    layoutId: 'aspects-demo',
    breakpoints: { xs: 1, md: 3 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "16:9 (Widescreen)",
                aspect: "16:9"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "4:3 (Standard)",
                aspect: "4:3"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "1:1 (Square)",
                aspect: "1:1"
            }
        }
    ]
});

Example 6: Size Variants

Control player width with size variants:

RSL.JSONLayout.renderLayout('#demo-sizes', {
    version: 2,
    layoutId: 'sizes-demo',
    breakpoints: { xs: 1 },
    gap: "2rem",
    items: [
        {
            content: {
                type: "html",
                value: "<h4 style='margin-bottom:0.5rem'>Small (400px max-width)</h4>"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "Small Video",
                size: "sm"
            }
        },
        {
            content: {
                type: "html",
                value: "<h4 style='margin-bottom:0.5rem'>Medium (640px max-width)</h4>"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "Medium Video",
                size: "md"
            }
        },
        {
            content: {
                type: "html",
                value: "<h4 style='margin-bottom:0.5rem'>Large (960px max-width)</h4>"
            }
        },
        {
            content: {
                type: "video-player",
                src: "https://www.w3schools.com/html/mov_bbb.mp4",
                title: "Large Video",
                size: "lg"
            }
        }
    ]
});

Video Player V2 API