support Contact Support | system status System Status
Page Contents

    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
    • Video Cloud analytics
    • Third party plugins

    Note that while analytics will be collected in Video Cloud, 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>
      	        

    Page last updated on 20 Feb 2020