Video

Videos can be included within Instant Articles to enhance the storytelling experience. Videos can be configured to autoplay, or they can be set up to play after a reader's tap.

Videos are specified using the standard HTML <figure> element, which wraps a <video> element that defines the video in the Instant Article. The <figure> element representing the video must be included standalone within the body of the article and not enclosed within a <p> element.

Instant Articles support all video file formats that can be uploaded to Facebook.

Your videos will be uploaded directly via your RSS feed — there’s no need to post videos separately to Facebook in order to include them in an Instant Article.

Don't use the data-fb-disable-autoplay attribute to disable autoplay on videos smaller than 640x480 pixels.

If you would like to embed a video via a third-party player, you can do so using a Social Embed or Interactive element. However, note that videos embedded via a third-party player cannot appear in your Header or News Feed Preview.

Options

Name Description Definition

360

Enable a 360 video to be rendered in your article.

Add the attribute data-fb-parse-360 in the <video> element.

Caption

Descriptive text for your video. May also include attribution to the originator or creator of this video.

Add the Caption element to your <figure> element representing this video.

Controls

Specifies the visibility of the video player controls on this video.

Remove play controls for the video by adding the data-fb-disable-controls attribute to the <video> element.

Feedback

Enables readers to like and comment on this video.

Add the Feedback attribute to the <figure> element representing this video.

Location

Species the geographic location for this video.

Include a <script> element with the op-geotag class within the <figure> element representing the video. The point can have a number of properties:

  • title: the name of the point's location
  • radius: the radius of the map boundary
  • pivot: a boolean value indicating whether the point is centered for the geotag view
  • style: the type of map style to use for this location. This property can be set to hybrid or satellite.

Loop Mode

Specifies the looping behavior for this video.

Include one of the following attributes on the <video> element:

  • loop: enables looping playback
  • data-fade: enables cross-fading

Playback Mode

Specifies the playback mode for this video.

By default, all videos will be autoplayed. Add the data-fb-disable-autoplay attribute to the <video> element in order to require the reader to tap to play the video.

Poster Frame

An image that is shown while the video is not playing. If this is not included, the first frame of the video will be shown.

Include an <img> element within the <figure> block representing this video. Poster frames cannot be used if the video is used in the News Feed Preview.

Presentation

Defines the presentation style of the video.

Add the data-mode attribute to your <figure> element representing the video with one of the following values:

  • aspect-fit: video is rendered in aspect-fit layout; tapping expands to full screen and enables tilt-to-explore
  • aspect-fit-only: video is rendered in aspect-fit layout; tapping maintains aspect-fit layout with tilt-to-explore disabled
  • fullscreen: video is rendered in full screen with tilt-to-explore enabled; tapping collapses video to aspect-fit
  • non-interactive: video is rendered as provided; tap interactions are disabled

Note: These attributes do not work with 360 videos.

Source [required]

The URL linking to the video resource.

Add a <source> element within your <video> element and set the URL on its src attribute.

Examples

Basic video

The simplest representation of a video within an Instant Article is to wrap a <video> tag with a <figure> element and have the enclosed <source> element point to the URL source of the video.

<figure>
  <video>
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />  
  </video>
</figure>

360 video

To add a 360 video using our native video player, insert the data-fb-parse-360 attribute in the <video> element. You can also insert a 360 video by embedding it from a Facebook post. Learn how to insert a Facebook embed into your article.

<figure>
  <video data-fb-parse-360 >
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4"/>  
  </video>
</figure>

Note: The aspect-fit, aspect-fit-only, fullscreen, and non-interactive data-mode attributes will not work with 360 videos.

Video with caption

You can add a caption to your video by adding a <figcaption> element within the same <figure> element representing the video within your article.

<figure>
  <video>
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />  
  </video>
  <figcaption>This video is amazing.</figcaption>
</figure>

Video with feedback

You can enable your readers to like or comment on a video in your article by adding the data-feedback attribute to the <figure> representing the video.

<figure data-feedback="fb:likes, fb:comments">
  <video>
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />  
  </video>
</figure>

Video with location

You can add location context to a video in your article by adding a JSON <script> with the op-geotag class attached within the <figure> representing the video. The content of the script must use the GeoJSON format to specify the location.

<figure>
  <video>
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />  
  </video>
  <script type="application/json" class="op-geotag">  
    {
      "type": "Feature",    
      "geometry": {      
        "type": "Point",
        "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ] 
      },    
      "properties": {
        "title": "Jessore, Bangladesh",
        "radius": 750000,
        "pivot": true,
        "style": "satellite",
      }  
    } 
  </script>
</figure>

Video with attribution

You can add attribution to your video to provide additional context to the original source of the video. Use a <cite> element within the <figure> element representing the video.

<figure>
  <video>
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />  
  </video>
  <figcaption class="op-vertical-below">
    <h1>Video 1 Title</h1>
  <cite>
    Attribution Source
  </cite>
  </figcaption>

</figure>