iFrames Examples

Interactive demonstrations

RSL Iframes

RSL provides responsive iframe containers that maintain aspect ratios, work seamlessly with the grid system, and adapt to different screen sizes. Perfect for embedding videos, maps, external apps, and documentation.

New to RSL Iframes?

Get up and running in 2 minutes with our Quick Start Guide!

View Quick Start Guide
Iframe Container Class
.rsl-iframe-container — Responsive container with 16:9 aspect ratio by default

How It Works
• Container uses position: relative with padding-bottom percentage
• Iframe inside uses position: absolute to fill container
• Padding-bottom creates aspect ratio (56.25% = 16:9)
• Works with RSL grid system and density modes
• No JavaScript required

Common Aspect Ratios
• 16:9 (56.25%) - Default, YouTube, most videos
• 4:3 (75%) - Classic presentations, older videos
• 1:1 (100%) - Square, Instagram-style
• 21:9 (42.86%) - Ultrawide, cinematic

Accessibility Features
• Always include descriptive title attribute
• Use allowfullscreen for video iframes
• Consider loading="lazy" for performance
• Keyboard navigation works inside iframe content

Download RSL Example Pack

Basic Responsive Iframe (16:9)

The default .rsl-iframe-container maintains a 16:9 aspect ratio, perfect for videos and modern content.

Code • HTML

Custom Aspect Ratios

Override the default 16:9 aspect ratio by setting a custom padding-bottom percentage.

4:3 Classic (75%)

1:1 Square (100%)

Code • HTML

In Context: Tutorial Section

Combine iframes with text and buttons for tutorial sections.

Getting Started with RSL

Explore the framework features to learn the basics of Responsive Slot Layout.

Code • HTML



    
Getting Started Tutorial

    
Watch this tutorial to learn the basics.

In Context: Documentation Preview

Show documentation alongside an embedded preview using RSL grid.

RSL Framework Features

Responsive Slot Layout is a zero-dependency UI toolkit built around a slot-based grid system.

  • Zero Dependencies: No jQuery or frameworks required
  • ADA Compliant: WCAG 2.1 AA accessible
  • Grid-Powered: Data-driven responsive layouts
  • Customizable: CSS variables throughout
Code • HTML



    

        
RSL Framework Features

        
Description and content...

In Context: Comparison View

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

Buttons

Button components and patterns

Forms

Modern and basic form inputs

Alerts

Alert notification system

Code • HTML



    

        
Buttons

        

            
        

        
Description

In Context: Embedded Map

Perfect for contact pages and location displays.

Visit Our Office

Address:
123 Main Street
San Francisco, CA 94102

Phone:
(555) 123-4567

Email:
hello@rslayout.com

Code • HTML

Alternative: Fixed Height Iframe

For cases where you need a specific height instead of aspect ratio.

Code • HTML

Accessibility & Best Practices

✓ Built-in Features

  • Responsive by Default: Maintains aspect ratio across all screen sizes
  • Grid Integration: Works seamlessly with RSL slot layouts
  • No JavaScript: Pure CSS solution for performance
  • Overflow Handling: Prevents iframe content from breaking layout

Pro Tips

  • Always provide a descriptive title attribute for screen readers
  • Use loading="lazy" for iframes below the fold to improve performance
  • For YouTube, use allowfullscreen to enable fullscreen mode
  • Add appropriate allow permissions for embedded content
  • Consider using a placeholder/thumbnail for better perceived performance
  • Test keyboard navigation inside embedded content
  • Use captions or labels to provide context for embedded content