Iframes - Quick Start Guide

2-Minute Setup

1 Include CSS File

2 Add Responsive Iframe

✓ Done! Your iframe is now responsive and maintains a 16:9 aspect ratio across all screen sizes.

Quick Reference

CSS Class

Class	Purpose	Default Aspect Ratio
`.rsl-iframe-container`	Responsive iframe wrapper	16:9 (56.25% padding-bottom)

Common Aspect Ratios

Ratio	Padding-Bottom	Use Case
16:9	56.25%	YouTube videos, modern widescreen (default)
4:3	75%	Classic presentations, older videos
1:1	100%	Square content, Instagram-style
21:9	42.86%	Ultrawide, cinematic content
3:2	66.67%	Photography, some presentations

HTML Attributes

Attribute	Purpose	Required?
`src`	URL of embedded content	Yes
`title`	Accessible description for screen readers	Yes (accessibility)
`allowfullscreen`	Enables fullscreen mode for videos	Recommended for videos
`loading`	lazy = load when near viewport	Optional (performance)
`allow`	Feature permissions (autoplay, camera, etc.)	Optional

HTML Structure

Basic Structure (16:9 Default)

The simplest responsive iframe uses the default 16:9 aspect ratio.

Custom Aspect Ratio

Override the default with inline padding-bottom style.

YouTube Video

Include permissions for YouTube features.

Google Maps

Embed maps with lazy loading for performance.

Fixed Height (Alternative)

Skip the container for fixed-height iframes.

How It Works

The Padding-Bottom Technique:

Container has position: relative and width: 100%
padding-bottom: 56.25% creates height based on width (16:9 ratio)
Iframe has position: absolute and fills the container
Container height scales with width, maintaining aspect ratio
Works at any screen size without media queries or JavaScript

CSS Implementation


.rsl-iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
}

.rsl-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

⚠ Important: The iframe must be a direct child of .rsl-iframe-container for the positioning to work correctly.

Common Patterns

1. Video Tutorial Section

Combine video with description and call-to-action



    Getting Started Tutorial
    Watch this 5-minute video to learn the basics.

2. Side-by-Side Documentation

Show text alongside embedded preview



    
        Features
        
            Zero dependencies
            ADA compliant
            Grid-powered

3. Contact Page with Map

Embed Google Maps with contact information



    
        Visit Us
        Address:
123 Main St, City, State
        Phone:
(555) 123-4567

4. Comparison Grid

Multiple embedded examples side-by-side

Accessibility & Best Practices

Built-in Accessibility Features

Responsive: Maintains aspect ratio across all devices and screen sizes
No JavaScript: Pure CSS solution for maximum compatibility
Overflow Handling: Prevents iframe content from breaking layout
Grid Integration: Works seamlessly with RSL slot layouts

Required: Title Attribute

Always provide a descriptive title attribute for screen readers.

Keyboard Navigation

Tab: Focus moves into iframe content
Shift + Tab: Focus moves out of iframe
Inside iframe: Keyboard navigation follows embedded content's behavior

⚠ Testing Note: Always test keyboard navigation with embedded content. Some third-party iframes may have their own keyboard traps or focus issues.

Performance Optimization

Use loading="lazy" for iframes below the fold.

Motion Considerations

Autoplay Videos: Be cautious with autoplaying video content. Users with prefers-reduced-motion may be sensitive to automatic animations. Consider using a static thumbnail with a play button instead of autoplay.

Integration with RSL Layouts

Iframe containers work seamlessly with all RSL grid features.

Responsive Grid

With Utility Classes




    

Video caption

Pro Tips

✨ Tip 1: For YouTube, use the /embed/ URL format, not the regular watch URL

✨ Tip 2: Calculate custom aspect ratios: padding-bottom = (height / width) × 100%

✨ Tip 3: Add captions or labels below iframes to provide context for embedded content

✨ Tip 4: Use border: 0 to remove default iframe borders for cleaner appearance

✨ Tip 5: Combine with RSL cards for polished embedded content presentations

⚠ Security: Only embed iframes from trusted sources. Third-party iframes can potentially access user data or run malicious scripts.

Troubleshooting

Iframe Not Maintaining Aspect Ratio?

Check: Iframe is a direct child of .rsl-iframe-container
Check: Container has .rsl-iframe-container class
Check: No conflicting CSS on the iframe or container

Content Not Loading?

Check: src URL is correct and accessible
Check: External site allows embedding (some sites block iframes)
Check: Browser console for CORS or X-Frame-Options errors

Iframe Too Small or Too Large?

Check: padding-bottom percentage matches desired aspect ratio
Check: Container has width: 100% (default in .rsl-iframe-container)
Check: Parent elements don't constrain width unexpectedly

Fixed Height Not Working?

Don't use .rsl-iframe-container for fixed-height iframes
Apply width and height directly to iframe element
Use inline styles or custom CSS class

Next Steps

See Examples

View iframes.html for realistic use cases

Copy Templates

Use playground.html as a starting point

Explore More

Learn about RSL Grid System for responsive layouts