Iframe
Use an iframe when you need to embed another page or tool inside the page in a framed area.
Live demo
Visitors interact with the embedded content where it sits. Content authors supply a stable URL, a short title for accessibility, and a sensible starting height. Visual designers should expect third-party branding and loading behaviour. Use embeds only when policy and security allow the source domain.
Behaviour
- The iframe loads the remote URL at full width of the component.
- A resizer script can adjust height based on messages from the embedded page when supported.
Anatomy
- Iframe with unique id and title.
- Script that initializes height behaviour when the clientlib loads.
Replace with form or map embed example.
Content guidelines
- Title should name the service or task (for example “Campus map”), not the raw URL.
Best practices
Do
- Whitelist domains in any CSP or dispatcher rules before go-live.
Don't
- Don't embed mixed HTTP content on HTTPS pages.
When to use
- Approved external tools (forms, maps, booking) where embed is allowed by security and privacy review.
When not to use
- Login or PII flows without a DPF or security sign-off.
- Simple videos; use YouTube or Media player when they fit.
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/iframe/iframe.html']Technical behaviour
iframe.html loads the iframe resizer clientlib, outputs <iframe width="100%"> with src, height, and title, then runs iFrameResize({ scrolling: 'omit' }, "#id") so nested content can report its height.
Authoring fields
| Field | Purpose |
|---|---|
| URL | HTTPS embed target. |
| Height | Initial minimum height before resize messages. |
| Title | Short description for accessibility. |
Instances in the codebase
| Location | Notes |
|---|---|
apps/concordia/components/iframe/iframe.html | HTL. |
org.concordia.wcms.core.models.IframeModel | Sanitized src and metadata. |
| Item | Location |
|---|---|
| HTL | apps/concordia/components/iframe/iframe.html |
| Model | org/concordia/wcms/core/models/IframeModel.java |
| Vendor clientlib | apps.concordia.vendor.iframe-resizer |