Periscope embeds

A Periscope embed brings the best live video from Periscope into your article or website. A broadcast is embedded with Tweet embeds and embedded timelines, and a broadcaster profile is embedded with the On Air Button.

Tweet Embeds

Everywhere on the web a Tweet can go, a Periscope can go, too! When embedding a Tweet with a link to a Periscope broadcast, the full broadcast video is included. The Periscope broadcast will update in real-time when the broadcast is live, including the number of live viewers. When the broadcast has ended, visitors can replay the broadcast, see the total number of viewers, and visit periscope.tv for the full experience with hearts, comments, and more from the broadcaster.

Embedding a Periscope broadcast from a Tweet works the same way as embedding a Tweet. Publishers may copy-and-paste embedded Tweet markup generated on a Twitter.com Tweet detail page or via publish.twitter.com, pass a URL to a supporting CMS, or add a Tweet to the page using a JavaScript factory function. For more detail, visit Embed a Single Tweet.

Embedded Timeline

An embedded timeline displays Tweets from a specific Twitter user, a list of Twitter users, a search result, or a curated collection of Tweets. A full Periscope broadcast will appear for Tweets with links to a Periscope broadcast.

Share the latest Periscope broadcasts published to a Twitter account with an embedded search timeline. The filter:periscope search operator will restrict search results to recent Tweets containing a link to a Periscope broadcast.

On Air Button

Similar to the Follow Button, the On Air Button lets you embed Periscope broadcaster profiles anywhere on the web. The Periscope On Air Button displays a broadcaster’s live status and username. The button will change automatically to indicate when the broadcaster goes live!

Clicking the widget will open a new window showing the broadcaster’s profile on periscope.tv. If the broadcaster is live when visiting the page, their broadcast will automatically start playing.

Embed the On Air Button by visiting periscope.tv/embed, or by programmatically adding it to a page using the JavaScript factory function.

On Air Button JavaScript Factory Function

Twitter’s widget JavaScript library supports dynamic insertion of the Periscope On Air Button using the twttr.widgets.createPeriscopeOnAirButton function. Pass a Periscope username, target parent element, and any custom options.

The code snippets on this page assume Twitter’s widgets.js has successfully loaded on your page. Include an asynchronous script loader on your page while initializing window.twttr as described in our JavaScript loader documentation. All JavaScript code depending on widgets.js should execute on or after twttr.ready.

Parameter Description Example
username The username of the broadcaster on Periscope. KatmaiNPS
targetEl DOM node of the desired insertion point. document.getElementById('container')
options Override default widget options. Size can be set to ‘large’ or ‘small’ (default). large

Size previews

Large

https://g.twimg.com/dev/documentation/image/largeOffAir.png https://g.twimg.com/dev/documentation/image/largeOnAir.png

Small (default)

https://g.twimg.com/dev/documentation/image/smallOffAir.png https://g.twimg.com/dev/documentation/image/smallOnAir.png

Example

An element with a DOM ID of container exists on the page.

<div id="container"></div>

The code snippet below will insert Periscope user @KatmaiNPS into a page inside an element with a unique ID of container. The options object specifies a large size customization.

twttr.widgets.createPeriscopeOnAirButton(
  'KatmaiNPS',
  document.getElementById('container'),
  {
    size: 'large'
  }
);

Promises

The twttr.widgets.createPeriscopeOnAirButton function returns a Promise. You can execute code after a widget has been inserted onto your page by passing a callback to the resulting promise’s then function.

twttr.widgets.createPeriscopeOnAirButton(...)
.then( function( el ) {
  console.log('On Air Button added.');
});