Embed a player on an Instant Article (Web Player)

Learn how to add a player with video to a Facebook Instant Article

Once you upload a video, you can embed it in a Facebook Instant Article, which are HTML documents that quickly render on mobile devices. By using Facebook Instant Articles, you are able to personalize your stories in a unique format.


🚧

JWP players cannot be embedded directly into the page and are restricted to iframes.



Limitations

JW Players cannot be embedded directly into the page and are restricted to iframes.

Facebook Instant Articles do not support:

  • Autoplaying videos on iOS devices
  • Casting on Android devices

General limitations of iframes include:

  • Social sharing URLs are restricted to the top level domain, not the specific page URL


Requirements



Enhancing a Facebook Instant Article with Video

To embed a video and video player into a Facebook Instant Article, you need to get the JWP embed code and add it to a <figure> element in the Facebook Instant Article. The following sections explain each task in detail.


Get the JWP embed code

  1. From the JWP dashboard Media Library, locate and hover over the name of the video you want to embed. Additional video actions appear at the end of the row.
  2. Click Embed. The Embed a Video popup screen appears.
  3. Choose a Player.
  4. Copy the Embed Code on the IFRAME tab.


Add the embed code a Facebook Instant Article

  1. Wrap the standard iframe embed code in an HTML <figure> element. As per Facebook, add class="op-interactive" to this element.
<figure class="op-interactive">
<iframe src="https://cdn.jwplayer.com/players/thisisanexample/abcd4321-dbca1234.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="Sample Video" style="position:absolute;" allowfullscreen></iframe>
</figure>

  1. If not included in the JWP embed code, specify the width and height of the iframe. Facebook uses these dimensions to determine the aspect ratio and scale the iframe.
<figure class=”op-interactive”>
<iframe src="https://cdn.jwplayer.com/players/thisisanexample.html" width="1280" height="720" frameborder="0" scrolling="auto" title="Example Video" style="position:absolute;" allowfullscreen></iframe>
</figure>


Did this page help you?