Content unit embed codes

Content units are created in the CMS, under Content Units and Vertical Units. How to set up each type is described in the Help Center: https://helpdesk.target-video.com/hc/en-us/articles/4416658174610-what-are-targetvideo-content-units

This page covers the embed code the CMS gives you and how to work with it from JavaScript. The embed code only names the player and the content unit; the unit’s settings and videos are loaded when the page opens. Changes you make to the unit in the CMS apply without changing the embed code.

Scripts and functions

All scripts are served from https://player.target-video.com.

Playlist, Native, Mid-article and Simple units

These units run inside the player, so they use the player script and $bp():

<script type="text/javascript" src="https://player.target-video.com/player/build/targetvideo.min.js"></script>

<div id="TargetVideo_12345678"></div>
<script type="text/javascript">
    $bp("TargetVideo_12345678", {"id":"PLAYER_ID","playlist":{"mode":"widget","id":"CONTENT_UNIT_ID","widget_type":"native_widget"}});
</script>

The asynchronous version:

<div id="TargetVideo_12345678"></div>
<script type="text/javascript">
    var _bp = _bp || [];
    _bp.push({ "div": "TargetVideo_12345678", "obj": {"id":"PLAYER_ID","playlist":{"mode":"widget","id":"CONTENT_UNIT_ID","widget_type":"native_widget"}} });
</script>

<script type="text/javascript" async src="https://player.target-video.com/player/build/targetvideo.min.js"></script>

widget_type is playlist_widget, native_widget, mid_article_widget or simple_widget.

• JavaScript: $bp("TargetVideo_12345678") returns the player, so its methods and events work as described in JavaScript API Reference.

• Simple unit: the player also fires stickyChange when the unit sticks to the screen and when it returns; sticky in the event data is true or false.

• Settings in the embed code: a Widget object in the embed code overrides the unit’s CMS settings; for these units it replaces them as a whole. See Content unit parameters for every unit’s settings and how overrides work.

Lightbox, vertical lightbox and OTT traffic driver

These units have scripts of their own, and their config uses Playlist with a capital P:

<script type="text/javascript" src="https://player.target-video.com/player/build/bplr.lightboxwidget.min.js"></script>

<div id="TargetVideo_12345678"></div>
<script type="text/javascript">
    $lb("TargetVideo_12345678", {"id":"PLAYER_ID","Playlist":{"mode":"widget","id":"CONTENT_UNIT_ID","widget_type":"lightbox_widget"}});
</script>

The asynchronous version:

<div id="TargetVideo_12345678"></div>
<script type="text/javascript">
    var _bp_lbs = _bp_lbs || {};
    _bp_lbs["TargetVideo_12345678"] = {"id":"PLAYER_ID","Playlist":{"mode":"widget","id":"CONTENT_UNIT_ID","widget_type":"lightbox_widget"}};
</script>

<script type="text/javascript" async src="https://player.target-video.com/player/build/bplr.lightboxwidget.min.js"></script>

The vertical lightbox uses $bs, _bp_bs and bplr.shortswidget.min.js; the OTT traffic driver uses $td, _bp_td and bplr.trafficdriver.min.js.

• Keep the async object before the script tag, as in the CMS code. The script reads it once, when it loads; for a unit you add later, call $lb(), $bs() or $td() directly.

• Standard lightbox: $lb("TargetVideo_12345678") returns the lightbox. Its video player is created when a viewer opens a video, as $bp("Player_CONTENT_UNIT_ID"); from then on the player’s methods and events are available.

• The vertical lightbox and the OTT traffic driver have no public JavaScript API.

Reels

A Reels unit has two parts: the feed, a full-height vertical video feed, and optional thumbnail cards that link to it. Both render straight into your page, without an iframe.

The feed. With access to the page’s <head>, put the stylesheet and script there and the feed element in the body:

<link rel="stylesheet" href="https://player.target-video.com/reels/index.css"/>
<script src="https://player.target-video.com/reels/index.js" defer></script>

<div class="tv-feed" data-widget-id="CONTENT_UNIT_ID"></div>

Without access to the <head>, paste all three lines in the body. Then:

• Give the feed’s parent element a height, e.g. height: 100dvh. The feed fills its parent, so without a height it collapses to zero.

• One feed per page: the script uses only the first .tv-feed element.

• Starting at a video: add ?v=VIDEO-SLUG to the page address. The slug is the video title in lower case, with spaces replaced by hyphens and other characters removed.

• The feed changes the page address. As viewers scroll, it replaces the query string with ?v= and the current video’s slug, so other query parameters, such as UTM tags, disappear from the address bar. If your page needs them, read them before the feed starts.

Thumbnail cards. Paste this where the cards should appear; a page can have several:

<script defer src="https://player.target-video.com/reels/reelCards.js"></script>
<div class="tv-reel-cards" data-widget-id="CONTENT_UNIT_ID"></div>

Each card links to the feed page set on the unit in the CMS, with the video’s ?v= slug added. Links open in a new tab unless the unit is set to open them in the same tab.

The feed and the cards have no public JavaScript API.