Iframely iFrame helpers

Iframely comes with optional iFrames served from our CDN. By default, we wrap publisher's embed codes into hosted iFrame only when required. You can request our iFrames for all content, or disable each wrapper fallback that may be used.

Our iFrame helper is a fixer. It fixes publisher's issues, delivers security, performance, better and more consistent user experience and all of our HTML options.

Iframely knows rich media from over 1900 domains and it might be overwhelming to keep up with their inconsistencies. Our iFrame helpers resolve it for you. Besides, iFrames will update the rich media embed codes they contain in the background, so that you don't have to deal with it yourself.

iFrames are the part of the API and usage hits are registered the same way. As it might generate a bigger number of hits, our default API settings activate iFrame when required for edge cases only.

Technical improvements

Hosted iFrames help with following technical features.

Async load
Our iFrames do not block any scripts you might have for body's `onload` event. The iFrames load empty, fire load event instantly, and, only after that, they start rendering the third party content.
JavaScript friendly
Embeds from some publishers cannot be added to DOM of your page via JavaScript. We wrap those into iFrame by default to fix that.
3rd party scripts
If your system engine doesn't easily allow arbitrary 3rd party scripts (for example, React), we can wrap such embeds into iFrame and give you a single embed.js script that you need to make an exception for. Embed.js script is available on GitHub if you wish to self-host.
Predictive height
Iframely predicts height of scripted widgets such as Twitter, Facebook and Instagram so that the content on your page does not jump around while media loads. Our iFrames adjust height to exact actual value when it becomes known.
By default, we wrap embed codes that we know are not SSL-friendly into our iFrame. That way our iFrames will present the actual non-SSL media on HTTP websites, and fall back to our summary card if embedded over SSL.
Flash on mobile
Similarly to SSL, we will wrap Flash embeds into our iFrame and show a summary card instead on devices that don't have it installed.
Iframely iFrames keep updating URLs in the background so that you do not need to re-cache embed codes on your own.
Web components
While we keep calling it "iFrames", at times we will actually use Shadow DOM and imports in browsers that support it to bulk-insert web components instead of iFrames. It makes widgets load even faster. You can disable this upgrade in your settings or via &import=0 API parameter.

HTML helpers

All of Iframely renders for HTML helpers we offer are delivered via hosted iFrames.

Summary as URL previews and/or media cards which also contain a media attachment.
iFrames and embeds formatted for Accelerated Mobile Pages and with proper event model.
A placeholder with "play" button which loads players just when user requests it. Publishers that autoplay their videos are served only via click-to-play, plus, we can try the same approach for any publisher. Our iFrames start pre-fetching players as user moves her mouse towards the "play" button. This way, the loading of players is perceived to be in a snap.
MP4 player
If publisher give a raw MP4 file, we wrap it into our MP4 player. The design can be changed through "Click-to-play".
Iframely uploads GIF files and transcodes them into smaller auto-looping MP4 files. Direct links to other image files also make us to upload those images to avoid hot-linking.
Player events
Control players with unified JavaScript API.
Playback sync
Iframely will try and stop any playing videos if a user starts interacting with another one.
Lazy-loading can be applied just for players through your settings. We will instantly show an image placeholder right away. Then swap it with actual player once it is loaded.

How iFrame helpers are sourced

Iframely handles millions of frame-views a day via our fast global content-delivery network. You can also bring your own CDN.

Depending on your plan and settings, iFrames will either include hashed version of your API key into its src, or will be a permanent public embed codes through the Content IDs.

The iFrames with Content IDs will keep available even if you decide to cancel your subscription. To turn Content IDs on, check the box on your iFrames settings page.

The JavaScript-based native embeds and Iframely cards will be served with our embed.js script to resolve the unknown widget height.

How to activate iFrame helpers

You can activate hosted iFrames in your API settings or by sending &iframe=1 query-string parameter with your API requests.

API settings, however, provide configuration when to use iFrames in a more flexible way. For example, prevent certain domains from being wrapped into hosted iFrame or only use iFrames when an HTML helper or a summary card are required.

If you'd rather not get any iFrames at all, you may use iframe=0 with your API calls to disable any helpers.

Previous article: Embed.js
Next article: URL cards