Iframe V2

Responsive iframe containers for videos, maps, and embedded content

Back to Component Examples
Iframe V2 Features:

Example 1: Basic 16:9 Iframe

The default aspect ratio is 16:9, perfect for YouTube videos and modern widescreen content.

Basic 16:9 Iframe • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "basic-iframe",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "iframe",
                src: "https://www.youtube.com/embed/dQw4w9WgXcQ",
                title: "Example video demonstration",
                // aspectRatio: "16:9" is default
            }
        }
    ]
});

Example 2: Custom Aspect Ratios

Choose from preset aspect ratios or provide a custom percentage.

Custom Aspect Ratios • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "aspect-ratios",
    breakpoints: { xs: 1, md: 2 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "iframe",
                src: "./why-choose-rsl.html",
                title: "4:3 Classic ratio",
                aspectRatio: "4:3"
            }
        },
        {
            content: {
                type: "iframe",
                src: "./why-choose-rsl.html",
                title: "1:1 Square ratio",
                aspectRatio: "1:1"
            }
        }
    ]
});

// Available ratios: "16:9", "4:3", "1:1", "21:9", "3:2", "9:16"
// Or custom percentage: "75%" for 4:3

Example 3: YouTube Video

Embed YouTube videos with proper permissions for fullscreen, picture-in-picture, and more.

YouTube Video • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "youtube-embed",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "iframe",
                src: "https://www.youtube.com/embed/VIDEO_ID",
                title: "YouTube video player",
                allowFullscreen: true,
                allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
                borderRadius: "8px"
            }
        }
    ]
});

Example 4: Fixed Height

Use fixed pixel height instead of aspect ratio for specific layout requirements.

Fixed Height Iframe • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "fixed-iframe",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "iframe",
                src: "./layout/iframes/examples.html",
                title: "RSL Iframe Examples",
                height: "400px",  // Fixed height mode
                border: "1px solid #dee2e6",
                borderRadius: "8px"
            }
        }
    ]
});

Example 5: Comparison Grid

Display multiple embedded examples side-by-side for comparison.

Iframe Comparison Grid • JavaScript
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "iframe-grid",
    breakpoints: { xs: 1, sm: 2, md: 3 },
    gap: "1.5rem",
    items: [
        {
            content: {
                type: "iframe",
                src: "./components/buttons/examples.html",
                title: "Buttons Component",
                borderRadius: "8px"
            }
        },
        {
            content: {
                type: "iframe",
                src: "./components/alerts/examples.html",
                title: "Alerts Component",
                borderRadius: "8px"
            }
        },
        {
            content: {
                type: "iframe",
                src: "./components/modal/examples.html",
                title: "Modal Component",
                borderRadius: "8px"
            }
        }
    ]
});

Example 6: Skip Links (Accessibility)

Skip links are enabled by default for keyboard accessibility. They appear when focused via Tab key, allowing users to skip past or return to before the iframe content.

How to test skip links:
  • Press Tab to navigate to the iframe area
  • A "Skip embedded content" link appears - press Enter to jump past the iframe
  • Continue tabbing after the iframe to find "Return to before embedded content" link
  • Set skipLinks: false to disable this feature
Skip Links Configuration • JavaScript
// Skip links are enabled by default
RSL.JSONLayout.renderLayout('#container', {
    version: 2,
    layoutId: "iframe-skiplinks",
    breakpoints: { xs: 1 },
    items: [
        {
            content: {
                type: "iframe",
                src: "https://www.youtube.com/embed/dQw4w9WgXcQ",
                title: "Example Video",
                // skipLinks: true (default)
                skipBeforeText: "Skip this video",
                skipAfterText: "Return to before video"
            }
        }
    ]
});

// To disable skip links:
{
    type: "iframe",
    src: "https://example.com",
    title: "Embedded content",
    skipLinks: false  // Disables accessibility skip links
}

API Reference

Complete reference for iframe configuration options.

Iframe Configuration Options • JavaScript
// Iframe Content Type Configuration
{
    type: "iframe",

    // REQUIRED
    src: "https://example.com",     // URL of embedded content

    // ACCESSIBILITY (required for a11y compliance)
    title: "Description for screen readers",

    // ASPECT RATIO MODE (default)
    aspectRatio: "16:9",            // "16:9", "4:3", "1:1", "21:9", "3:2", "9:16"
                                    // Or custom: "75%" for 4:3

    // FIXED HEIGHT MODE (alternative)
    height: "500px",                // Use fixed height instead of aspect ratio
    width: "100%",                  // Width (default "100%")

    // VIDEO OPTIONS
    allowFullscreen: true,          // Enable fullscreen (default: true)
    loading: "lazy",                // "lazy" or "eager" (default: "lazy")
    allow: "accelerometer; autoplay; clipboard-write; encrypted-media",

    // STYLING
    border: "1px solid #dee2e6",    // Border style
    borderRadius: "8px",            // Border radius
    classes: ["custom-class"],      // Additional CSS classes
    style: { boxShadow: "0 2px 8px rgba(0,0,0,0.1)" },  // Inline styles

    // SKIP LINKS (Accessibility)
    skipLinks: true,                // Enable skip links (default: true)
    skipBeforeText: "Skip embedded content",       // Text for skip-before link
    skipAfterText: "Return to before embedded content"  // Text for skip-after link
}

// ASPECT RATIO REFERENCE
// 16:9  = 56.25%  (default, YouTube, widescreen)
// 4:3   = 75%     (classic, presentations)
// 1:1   = 100%    (square, Instagram)
// 21:9  = 42.86%  (ultrawide, cinematic)
// 3:2   = 66.67%  (photography)
// 9:16  = 177.78% (vertical video)