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
- 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, addclass="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>
Updated 12 months ago