Theme Builder Embeds

A Theme Builder embed is one or more playlists embedded within a player. You need to create the embed yourself.

Embeds contain specific players and playlists of your choosing.

Note: Playlists are not visible by default. If you do not enable pods for your player, playlists are not visible to users. To make playlists visible to users, enable pods by associating the playlist and pod with a player.

You can also set the desired video for the player and whether the player's width is fluid or fixed. You can use the JavaScript embed to put the Theme Builder embed on a web page.

Embed Example

The following example embed can be analyzed to show its constituent parts.

This is a typical embed where the video shown in the player is the first video in the first playlist. However, depending on how you configure yours, they can be quite different from this representative sample.

<div id="playerContainer" ></div>
<script type="text/javascript" src="></script>
<script type="text/javascript">
var ooyalaPlayer;

OO.ready(function() {
    var playerConfiguration = {
        playlistsPlugin: {"data":["123456677"]},
        autoplay: false,
        loop: false,
        height: 542,
        width: 800,
        useFirstVideoFromPlaylist: true

    ooyalaPlayer = OO.Player.create('playerContainer', '', playerConfiguration);
In the following table, some long lines of code have been split across lines to preserve space.
Table 1. Theme Builder Embed Components
Theme Builder Embed Components Description
<div id="playerContainer"> The <div> for Theme Builder objects.
<script type="text/javascript"


The embed code, which contains:
  • The protocol and domain:
  • The player id: The ID of the player. Allows you to identify a specific named and styled player.
var ooyalaPlayer Defines the ooyalaPlayer variable.
OO.ready(function(){player_information}) Contains configuration information about the player.




Configuration information about the player.
playlistsPlugin: {"data":[playlist_id1, playlist_id2, ... ]} Specifies if a pod with playlists is associated with the player. The data key contains an array of publicly accessible playlist IDs; this example shows only a single array element.
autoplay, loop, height, width Player embedded parameters. For more information about player embedded parameters, see Player V3 Embedded Parameters.

Use this parameter to set the video in the player to be the first video from the first playlist. Valid values include true | false. In addition, set the embed_code portion of the OO.Player.create function to null.

Note: When a playlist is updated, after the caches expire, the first video in the first playlist that useFirstVideoFromPlaylist uses is updated.
If you don't want the video in the player to be the first video from the first playlist you can use another video by setting this parameter to "false" and specifying the desired video's embed_code in the OO.Player.create function like so:
var videoPlayer = OO.Player.create('playerwrapper',
    'embed_code', {
    height: 100%,
    width: 100%,
    useFirstVideoFromPlaylist: false,

    ooyalaPlayer = OO.Player.create('playerContainer',
    'embed_code', playerConfiguration);




Call to create the player with the specified content ID (video ID or embed code) and player configuration.

Was this article helpful?