Embed a player on an Instant Article (Web Player)

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

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.
Click Embed. The Embed a Video popup screen appears.
Choose a Player.
Copy the Embed Code on the IFRAME tab.

Add the embed code a Facebook Instant Article

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>

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>