Added new "Iframe" section; added iframes pattern

[arminsolecki]

Added responsive iframes pattern with full screen mode.

[bradfrost]

Hi @arminsolecki, thanks for your submission. I'm curious, what's the use case for this?

Right now I'm seeing a desktop-optimized viewport on my phone, and because the iframes run full-width, users can get stuck inside the iframe without any way to get out.

I'm hesitant to add this pattern to the pile as-is, but I'd love to hear more about the thinking behind it.

[arminsolecki]

Hi @bradfrost, The use case for this solution is when you need to include some specialized content/functionality from 3rd party provider that uses iframes (charts, graphs, stock information, share prices, book a table etc.)

Often those providers have limitations:

• not responsive content (iframe horizontal scrollbar issue)
• no access to iframe contentWindow because of cross domain request (height of iframe content is unknown which causes vertical scrollbar issue)
• no access to postMessage JavaScript in order to communicate with iframe
• limited or no styling for iframe content (branding guidelines issue)

Furthermore as you noticed you need some padding on each side of iframe in order to scroll below iframe content which reduces the space available for iframe(Updated Codepen demo with some padding and vertical media query).

By using this solution iframe looks good on mobile; in "full screen mode" you can easily navigate thru content; you don't need to use target="_blank" (many clients don't like if user leaves their page).

"Full screen mode" solution also works well with Google Maps when you need bigger map.

[bradfrost]

Hey @arminsolecki, Thanks for the clarification. I think there are some interesting points you brought up, and while I probably would discourage doing a full-screen takeover with an iframe, it's still a viable pattern that can be considered.

I added it under "Media" and renamed the pattern "Full-screen iFrame" to better articulate what the pattern accomplishes.

Thanks!