Embed a player on a Facebook Instant Article
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.
JW Players cannot be embedded directly into the page and are restricted to iframes.
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 JW Player embed code and add it to a <figure>
element in the Facebook Instant Article. The following sections explain each task in detail.
Get the JW Player embed code
- From the JW Player 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 JW Player 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>
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
Updated 10 months ago