Omit CSS and adjust styles

Iframely wraps responsive iFrames into two div elements. By default, required styles are included inline so the HTML works right away.

You may add a bit of required CSS to the stylesheet of your page and use Iframely with class names. Here's when it's particularly useful:

  • If your content management system is sensitive for inline styles;
  • Just to get slimmer HTML codes so they take less space in your database;
  • To activate the predictive height mechanism for the apps such as Twitter and Facebook.

Add required styles to your page

First of all, add these required classes either as <style> section in the head of your page, or your main CSS file:

.iframely-responsive {
    top: 0; left: 0; width: 100%; height: 0;
    position: relative; padding-bottom: 56.25%;
}
.iframely-responsive>* {
    top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;
}

It includes most CSS styles. But in your CMS, you still need to white-list padding-bottom: ..., pading-top, height and max-width as iFrames' sizing may differ and Iframely will keep including required styles with HTML codes.

Omit CSS from API responses

Make your API requests with &omit_css=true and you will get an HTML similar to this:

<div class="iframely-embed">
    <div class="iframely-responsive">
        <iframe src="..." allowfullscreen scrolling="no"></iframe>
    </div>
</div>

Both native and hosted iFrames will be returned with class names.

In the styles you added to your page, you match all elements as .iframely-responsive>*, not just iFrames, because Iframely may include other features depending on your settings, say a video placeholder.

Predictive height for app embeds

Unknown height is one of the challenges for JavaScript based embeds of many providers such as Twitter, Facebook or even Iframely's own cards. When your page loads, it takes a bit of time for script to load before user's browser can put embedded media properly into DOM. It may result in jerky experience: depending on how heavy your own webpage is, user sees the content on your page flick up or down.

Using &omit_css fixes that. Our iFrame helpers will switch to a predictive height mechanism: we will try and properly fit embed in DOM of your page right away, not waiting for asynchronous JavaScript calls. This should reduce screen flicks to a minimum. Embeds should take their targeted place on your page even before they load.

The embed codes for the script elements will look this way instead of our default <a>-based embeds:

<div class="iframely-embed" style="max-width: 550px">
    <div class="iframely-responsive" style="padding-bottom: 66.7468%;">
        <a href="..." data-iframely-url="..."></a>
    </div>
</div>
<script async src="//dev.iframe.ly/embed.js" charset="utf-8"></script>

Just to remind, you can also &omit_script.

Customize embeds via class iframely-embed

The class iframely-embed is yours to define and customize.

For example, here's styles if you'd like to center the max-width'ed embeds or portrait videos, provided that your parent div is embed-parent:

.embed-parent {
    display: flex;
    justify-content: center;
}
.embed-parent .iframely-embed {
    width: 100%;
}

If need be, you can add a max-width for responsive videos wrapped into iframely-embed; or define padding after the embed, etc.

For a possible UI fix for Facebook embeds that do not fit on smaller iOS screens (min width for Facebook posts is 350px): try adding -webkit-overflow-scrolling: touch; overflow-x:scroll; for class .iframely-embed. Horizontal overflow will be scrollable and will not affect your main content.

Previous article: More/less toggle
Next article: Omit scripts