1. Docs
  2. Content delivery

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 as they no longer come with our HTML codes:

.iframely-responsive {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}
.iframely-responsive > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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.

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.

Other class names

Iframely will add some more feature class names to the main embed code so that you can fine-tune CSS the way you want:

  • Main feature names iframely-player, iframely-app, iframely-image, iframely-reader, iframely-survey;
  • Additional feature flags for players: iframely-audio, iframely-playlist, iframely-gifv, iframely-slideshow, iframely-3d;
  • Iframely cards will come with iframely-card. Additionally, there will be iframely-small for compact cards.
  • Finally, the domain class iframely-youtube, iframely-twitter and the like. We take the domain name, and remove trailing .com, .net and .io from it. After that, any remaning dots . are replaced with dashes -.

For example,

<div class="iframely-youtube iframely-player iframely-embed">
  <div class="iframely-responsive">
    <iframe src="…"></iframe>
  </div>
</div>

For HTML widgets such as Twitter, Facebook and Instagram, class names are added only when HTML code is wrapped into Iframely iFrame. Native codes from publishers will have no additional class names.

Docs