The following document outlines key considerations for working with widgets and players:

  1. Player Embedding Options
  2. Widget Embedding Options
  3. Strategy for Dynamic Embedding

Both the widgets and players provide a multitude of runtime options for controlling the behavior.

Player Embedding Options

The TVPage Player can be embedded into existing web pages using an iframe.

This code is available for use when you have a video hub deployed in your account.

<iframe frameborder="0" allowfullscreen="true" width="640" height="360" src="//mktg.tvpage.com/tvpembed/176366786/"></iframe>

Each “Published” video gets a dedicated tvpembed. The above example is the simplest example of an embeddable player.

Another example of using the iframe embed is to place the iframe within a flexible container, allowing the player to resize responsively (this is a recommended best practice).

<div style="position:relative;width:100%;padding-top:56.25%;">
  <div style="position:absolute;top:0;left:0;width:100%;height:100%;">
    <iframe frameborder="0" allowfullscreen="true" width="100%" height="100%" src="//mktg.tvpage.com/tvpembed/176366786/"></iframe>
  </div>
</div>

We can also pass options to the player:

<iframe frameborder="0" allowfullscreen="true" width="640" height="360" src="//mktg.tvpage.com/tvpembed/176366786/?autoplay=1"></iframe>

Here are a list of options that can be passed to the iframe player:

autoplay=0 | 1

Value: 0 - this turns off autoplay

Value: 1 - this turns on autoplay

autonext=0 | 1

Value: 0 - this turns off autonext (start playing the next video if available automatically)

Value: 1 - this turns on autonext

overlay_color=magenta

Values: CSS color name, hex value or rgb value

overlay_opacity=0.25

Values: Range from 0 to 1 to specify the level of opacity of the play button overlay. 

play_button_width=100px

Value: A pixel based value for how wide the play button should be.

play_button_height=100px

Value: A pixel based value for how tall the play button should be.

play_button_background_color=green

Values: CSS color name, hex value or rgb value

play_button_border_radius=50%25%

Value: A percentage value for XX%YY% border radius rounding.

play_button_border_width=3px

Value: A pixel based value for the thickness of the play button border

play_button_border_color=yellow

Values: CSS color name, hex value or rgb value

play_button_border_style=solid

Values: CSS border style value (solid, dotted, inset, etc…)

play_button_icon_color=magenta

Values: CSS color name, hex value or rgb value 

progress_color=blue

Values: CSS color name, hex value or rgb value


Widget Embedding Options

Widgets are embeddable javascript codes that can be added into existing web pages or templates.

The following is an example of a widget embed code.

<div id="carousel"></div>
<script>
(function(d, s) {
  __TVPage__ = window.__TVPage__ || {};
  __TVPage__.config = __TVPage__.config || {};
  __TVPage__.config["carousel"] = {
    loginid: "1234567",
    channel: {"id":"987654321"},
    targetEl : "carousel"
  };
  window.addEventListener("load", function() {
    var js = d.createElement(s),
    fjs = d.getElementsByTagName(s)[0];
    js.src = '//domain.com/widget-name/index.js';
    fjs.parentNode.insertBefore(js, fjs);
  }, false);
}(document, 'script'));
</script>

The above sample embed code can vary slightly based upon the experience (different experiences can be fueled by different dynamic parameters passed to the embed code). The code itself comes in 3 parts.

  1. A target <div> element, where the widget will render into. This can be any element in the page.
  2. A configuration block of settings that are used to instantiate the widget.
  3. An execution block that executes the widget javascript.

Additional configuration options can be passed to the __TVPage__.config["carousel"] object to control the behavior and features of the widget:

  1. autonext - Boolean - enables/disables playing the next video, after current one ends.
  2. autoplay - Boolean - enables/disables autoplaying the video at first load.
  3. videos_playlist - Boolean - enables/disables video playlist shown on the left of the Modal.
  4. fix_page_scroll - Boolean - when the widget modal is open, it prevents the parent document from scrolling up or down.
  5. items_per_page - Number - changes the number of videos to be called at each iteration. (when loading more videos if the "videos_playlist" option is enabled).
  6. menu_item_play_category_tag_attribute - String - changes the attribute tag to be shown below item thumbnails. (if "videos_playlist" option is enabled).

Strategy for Dynamic Embedding

Widgets and players can be dynamically embedded either through providing options to the embed code itself or by configuring options passed at runtime dynamically.

Passing Parameters at Runtime

<script>
  window.__TVPage__ = window.__TVPage__ || {};
  __TVPage__.config = __TVPage__.config || {};
  __TVPage__.config["category-widget"] = {
    loginid: "1234567",
    channel: {
    "id":"1234567890",
    "parameters":{
        "main_category": "{{main_category}}",
        "sub_category": "{{sub_category}}"
      }
    },
    targetEl : "category-widget"
  };
</script>

In the above code, you can see the parameters of “main_category” and “sub_category” are being passed into the widget embed code, this allows the Dynamic Playlist (ID #: 1234567890) to query the platform for content that matches that criteria, dynamically.

Optionally, the behavior of the player can also be set using options at runtime, for example, if your video assets have a custom field: Autoplay (Yes/No), our widgets can respect the setting per asset.

These options combined together provide a powerful framework for customizing a standard video commerce experience throughout your website.

Did this answer your question?