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.
LIVE on #Periscope: 50 Artist talk on Larry Sultan at SFMOMA https://t.co/mcHsOUghhp
— SFMOMA (@SFMOMA) July 15, 2016
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 |
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.');
});