Working with Embeds in Theme Builder

A Theme Builder embed is one or more playlists embedded within a player.

Embeds contain specific players and playlists of your choosing. You can also set whether the width of the player is fluid or fixed. Once the embed is created, you are given lines of JavaScript to put the Theme Builder embed in a web page.

To create an embed:

  1. Log in to Theme Builder.
  2. Click the Embed tab.
  3. To set a background color for the embed, in the upper left, click the square to display a color palette. From the palette, select the desired color, and click Apply.
  4. Select a player from the Player list box.
  5. Select a video. To set the video in the player to the first video in the first playlist, select The First Video in the First Playlist. Note that when a playlist is dynamically updated, after the caches expire, the first video in the first playlist is updated. To select a different video, click Select, and using the search box, find the desired video.
  6. To add playlists, click Select near the Playlist heading and click the checkbox for the desired playlist. If you add more than one playlist the pod will show the different playlists in tabs above the video thumbnails. If you only add one playlist no tabs will appear above the video thumbnails.
  7. With the Settings controls on the left, make your design choice for autoplay and autorepeat:
    Both autoplay and autorepeat pertain both to individual videos and to entire playlists, but the behavior differs between them. The behavior of settings when you create a playlist is described below.
    • Autoplay control
      • ON: The system automatically start playing each video in a playlist.
      • OFF: For each video, the system displays a play button and waits for the user to click it.
    • Autorepeat control for individual videos
      • ON: After an individual video is complete, the individual video is automatically replayed.
      • OFF: After an individual video is complete, if the Replay option under End Screen has been selected in Theme Builder's Player tab (see Working with Players and Pods in Theme Builder), the system displays the replay button and the end screen.
    • Autorepeat control for entire playlist
      • ON: When the last video in the playlist completes, the system automatically replays the playlist from the beginning.
      • OFF: When the last video in the playlist completes, if the Replay option under End Screen has been selected in Theme Builder's Player tab (see Working with Players and Pods in Theme Builder), the system displays the replay button and end screen. Clicking replay restarts the playlist from its beginning.
  8. With the Settings controls on the left, make your design choice for fluid or fixed:

    Be aware that the width of your player is constrained by the width of the container in the target HTML page.

    Fluid: The term fluid means that the player and playlist adapt themselves to the width of the container (<div> or other container) on the HTML page you embed them in.

    Fixed: The term fixed means a specific set width. If you select Fixed, specify the width in pixels and whether the aspect ratio of the player should be maintained.

    Note: With the Theme Builder setting of fluid, the width of your player adapts itself to the width of its container, rather than having a built-in, static width in the player itself (which is the setting fixed). Therefore, with fluid, you need to set a specific width and height on the parent <div> container of the Theme Builder embed, as in the following example. Otherwise, the fluid player does not have a width to adapt to.
    <div id="playerContainer" style="height:240px;width:320px;">       
          
  9. When you are finished, in the upper left corner click Generate Embed Code. An example of an embed, the programmatic components of which are described in Theme Builder Embeds
    <div id="playerContainer" ></div>
    <script type="text/javascript" src="http://player.ooyala.com/v3/1b80572b5bd64648b17db6c515f551ab?version=717c866e439820e7364025e4127ad37b2f0759f7"></script>
    <script type="text/javascript">
    var ooyalaPlayer;
    
    OO.ready(function() {
        var playerConfiguration = {
            playlistsPlugin: {"Data":["123456"]},
            autoplay: false,
            loop: false,
            height: '',
            width: '',
            useFirstVideoFromPlaylist: true
        };
    
        ooyalaPlayer = OO.Player.create('playerContainer', '', playerConfiguration);
    });
    </script>
          
  10. Copy the generated embed code and embed it on a web page.
Note: The generated JavaScript code is a fragment that must be embedded inside the <BODY> tags of a fully formed HTML page. Be sure to copy the code completely and exactly as-is.
Note: Discovery and Playlists (created using ThemeBuilder) each control end screen behavior, so you cannot use them together. When you embed a player on a web page, you can use either Discovery or Playlists, but not both.

해당 내용이 도움 되었습니까?