Publishing Brightcove Players in Facebook Instant Articles

In this topic you will learn how to publish Brightcove Players in Facebook Instant Article pages.

Facebook Instant Articles are a fast and interactive experience for reading articles in a Facebook News Feed. Instant Articles can be published directly from a content management system (using the Instant Articles API) or by providing an RSS feed. Instant Articles display as much as ten times faster than standard mobile web articles. When a friend or page you follow shares a link in your News Feed, Facebook will check to see if there is an Instant Article associated with that URL. If so, Facebook will display it as an Instant Article. If not, it will open in the web browser.

Brightcove Players that are embedded in Instant Article continue to support:

  • Pre-roll and mid-roll advertising
  • Brightcove analytics
  • Third party plugins

Note that while analytics will be collected by Brightcove, the display domain recorded in analytics will be a brightcove.com domain, not a facebook.com domain.

While different types of content can be shared using Instant Articles, this topic covers sharing Brightcove Players in Instant Article pages. For complete information on Instant Articles, see the Facebook documentation.

Generating player embed code

No changes to the player properties are needed to use it in an Instant Article. Follow these steps to generate the player embed code for an Instant Article:

  1. Take the standard iframe embed code from Video Cloud Studio and place it inside an HTML5 <figure> element. 
    	<figure>
	<iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
	 allowfullscreen webkitallowfullscreen mozallowfullscreen width="640" height="360"></iframe>
	</figure>
  2. Add the op-interactive class to the figure tag. 
    	<figure class="op-interactive">
	<iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
	 allowfullscreen webkitallowfullscreen mozallowfullscreen width="640" height="360"></iframe>
	</figure>
  3. Give the iframe a width and height. The width and height set the aspect ratio rather than the absolute size of the player. The finished code will look like this: 
    	<figure class="op-interactive">
	<iframe src="//players.brightcove.net/1486906377/V1ziujO35l_default/index.html?videoId=3766858011001"
	 allowfullscreen webkitallowfullscreen mozallowfullscreen width="16" height="9"></iframe>
	</figure>