Iframely iFrames

Smart iFrame is a fixer. It fixes publisher's issues, delivers security, performance and user experience.

Iframely knows rich media from over 1800 domains. It's a challenge to keep up with inconsistencies and our iFrame helpers resolve it.

Iframely iFrames keep updating URLs in the backgound so that you do not need to re-cache embed codes on your own.

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

While we keep calling it "iFrames", some Iframely hosted widgets will actually be served as Web Components if it speeds up the load time and user's browser supports it.

Delivering great user experience

Iframely features that require iFrames

Many iFramely features are served only via iFames: click-to-play, player events, lazy loading, friendly GIFs, summary and promo cards for URL previews, AMP support.

Non render-blocking iFrames

iFrames are render-blocking. Your page will not continue to render until after each iFrame reports it has loaded. It may add up and have great drag on your site's performance, particularly for mobile users.

Iframely iFrames fix it. iFrame loads empty in a snap, returns rendering priority to your page by firing load event instantly, and then continues to the media in the background. It gives iFrames asynchronous loading.

Hold auto-playing videos

When Iframely knows that a video starts playback when it loads, we will prevent it by putting a video placeholder inside an iFrame. This way the actual player will load only when user requests it. See click-to-play section.

SSL- and mobile- proof

Heads-up: Iframely can not fit flash-only videos into oEmbed API format. If you're using that endpoint and have iFrames fallbacks disabled in your settings, we will not be able to give you an embed as it requires our iFrame to be friendly for your mobile users.

Embed code isn't "inline"

Some HTML embed codes do not work when you append them to the DOM via JavaScript. For example, GitHub Gists use document.write and simply can not be rendered dynamically. In such cases, Iframely will add the server-side rendered iFrame and the widget will show alright.

Heads up: popular Facebook and Instagram embeds are not natively "inline" too in the other way: the first embed on the page will append alright via JavaScript, but the next ones will fail to render.

If you only render your pages and their embeds from you server-side, simply check off this fallback in your API Settings.

Predictive height for Twitter, Facebook and others

If you use Smart iFrames with &omit_css=1, Iframely will start predicting the height of the scripted widgets such as Twitter, Facebook and Instagram so that the content on your page does not jump around while the media loads.

Direct URLs to image will result in files being resized, wrapped into iFrame to avoid hot-linking issues as well as to consistently converted to friendly progressive jpegs. GIFs will be converted into auto-looping MP4 videos

How smart iFrames are sourced

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

Depending on your plan, iFrames will either include hashed version of your API key into its renders, or will be a permanent public embed codes through the short URLs.

The iFrames with short URLs will keep available even if you decide to cancel your subscription. Short URLs will also be linked to our global content delivery network.

The JavaScript-based native embeds will be wrapped with our embed.js lib code to resolve the unknown widget height.

How to activate smart iFrames

You can activate smart 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 smart iFrame or only use iFrames when an HTML option or a summary card are required.