Embeds

Social embeds and interactive graphics that are in the web versions of your articles can also be included in your Instant Articles. These embeds can include custom interactive media, third-party video players, social media (such as Facebook posts, Instagrams, Tweets, YouTube videos or Vines) and other <iframe> media elements.

Instant Article supported embeds are not limited to those listed on this page. We recommend testing any embed using the op-interactive tag and checking to see if it renders on both iOS and Android by using the Pages Manager app.

Embeds are specified using the standard HTML5 <figure> element, which wraps an <iframe> element containing the markup for your embedded media. To include any social embed or interactive element in your Instant Article, apply the op-interactive class to a <figure> element.

The <figure> element representing the embed must be included standalone within the body of the article and not enclosed within a <p> element.

If you implement your embed using a src attribute on the <iframe> element, we recommend that you specify both the width and height of your <iframe>. Otherwise, your embedded media may be scaled incorrectly and get cropped. If the size you specify is too wide for the phone’s screen, we will automatically scale the embed down while maintaining its aspect ratio.

For best results on embeds with a src attribute, input the exact width and height of the <iframe> used in your webpage. We use those dimensions to determine the aspect ratio and will automatically scale it to the correct size.

Options

Name	Description	Definition
Caption	Descriptive text for your embed.	Add the Caption element to your `<figure>` element representing this embed.
Height	The height of your embed in CSS pixels.	Add the `height` attribute to the `<iframe>` element wrapping your code. You can set the height up to a maximum of 960 pixels.
Width	The width of your embed in CSS pixels.	Add the `width` attribute to the `<iframe>` element wrapping your code.
HTML Source [required]	The source of the markup for your embed.	Embed the full unescaped HTML and scripts within the `<iframe>` element. There are two ways to do this: Place HTML directly between the `<iframe></iframe>` tags. Implement an `src` attribute within the `<iframe>` tag. If you do this, you must specify both the height and width attributes of the `<iframe>`.
Margin	Left/right margins of your embed.	Add one of the following classes to the `<iframe>` element wrapping your code: `no-margin` (default: full width of the screen) `column-width`: width of the column in which it resides

Examples

Instagram

You can embed Instagram content within your Instant Article by inserting the Instagram embed code inside of an <iframe> and wrapping it with a <figure> element with the op-interactive class attached.

<figure class="op-interactive">
  <iframe>
    <!-- Include Instagram embed code here. Your embed code should look like: <blockquote class="instagram-media" ... -->
  </iframe>
</figure>

Facebook

You can embed Facebook content within your Instant Article by inserting the Facebook embed code inside of an <iframe> and wrapping it with a <figure> element with the op-interactive class attached.

<figure class="op-interactive">
  <iframe>
    <!-- Include Facebook embed code here. Your Facebook embed code should contain both the "JavaScript SDK" and the "Embedded Post Tag" parts described at https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually -->
  </iframe>
</figure>

Twitter

You can embed Twitter content within your Instant Article by inserting the Twitter embed code inside of an <iframe> and wrapping it with a <figure> element with the op-interactive class attached.

<figure class="op-interactive">
  <iframe>
    <!-- Include Twitter embed code here. Your embed code should look like <blockquote class="twitter-tweet" ... -->    
  </iframe>
</figure>

Vine

You can embed Vine content within your Instant Article by inserting the Vine <iframe> embed code inside a <figure> element with the op-interactive class attached.

<figure class="op-interactive">
  <iframe src="https://vine.co/v/Ot2mpV1YO6F/embed/simple" width="600" height="600"></iframe>
</figure>

YouTube

You can embed YouTube content within your Instant Article by inserting the YouTube <iframe> embed code inside a <figure> element with the op-interactive class attached.

<figure class="op-interactive">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
</figure>

Embed with no margins

To render your embed at the full width of the screen, add the no-margin class to the <iframe> that wraps the code defining your graphic.

<figure class="op-interactive">
  <iframe class="no-margin" src="http://example.com/custom-interactive" height="180" width="320"></iframe>
</figure>

Embed with default margins

To render your embed with its width fixed to the column in which it resides in your article, add the column-width class to the <iframe> that wraps the code defining your graphic.

<figure class="op-interactive">
  <iframe class="column-width" src="http://example.com/custom-interactive" height="180" width="320"></iframe>
</figure>

Embed with caption included

You can add a caption to your embed by adding a <figcaption> element within the same <figure> element representing the embed within your article.

<figure class="op-interactive">
  <iframe class="no-margin" src="http://example.com/custom-interactive" height="180" width="320"></iframe>
  <figcaption>This graphic is awesome.</figcaption>
</figure>