Simple Javascript plugins for instant integration of your Katapy video library into your website and mobile apps.

Demos

Fully Responsive

For optimal viewing and interaction experience.

Fully Customizable

Colors, options, and sizing are yours to choose.

Fully Integrated

No mess and no hassle. Drop the code in and enjoy.

How To Use

  1. Select a Katapy Javascript widget from any of the provided demos.

    2. Explore all demos and copy the Javascript widget tag <script ...></script> of your choice.

  2. Replace the Katapy media library reference codes.

    3. The demos reference an example media library with demo video content. To display your own content you will need to replace the Katapy reference codes with your own from the Katapy admin console.

    In the meantime, you can use the Katapy example library on the demo pages for accelerated website development and testing. Also note that there is a Javascript widget generator inside the Katapy admin console to simplify creating and testing your own widget.

  3. Load jQuery and the Katapy Javascript widget tag into your web page.

    4. To use any Katapy Javascript widget, you’ll need to make sure jQuery 1.10.2 or higher is included.

    For optimal responsive design, insert the script into a <div>...</div> tag that is setup with full page width (100%), relative page width (e.g. 50%) or a grid layout with dynamic width (e.g. grid-6 column). The height should be set to auto. Use max-width to limit the maximum rendering width if desired.

    <!DOCTYPE html>
<html>
<head>

    <!--a) insert jQuery lib into the head your web page-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>
<div class="myKatapyWidgetDiv">

    <!--b) insert Katapy widget into your responsive div of choice-->
    <script type="text/javascript" src="http://embed.katapy.com/jswidget/embed/channel.js?cd=katapydeveloperdemochannel&library=katapydeveloperdemochannel" data-display="" data-autostart="no" data-poster="http://embed.katapy.com/jswidget/img/Welcome-to-Katapy.png" data-schedule-highlight="D70000" data-schedule-time-format="12h" data-schedule-timezone="channel" data-schedule-align="right" data-schedule-videos="6" data-player-ads="" data-player-ga="" data-player-controls="overlay" data-player-bug="http://embed.katapy.com/jswidget/img/katapyBug.png" data-player-bug-position="top-right" ></script>

</div>
</body>
</html>

Customizing

All of the options below are available to customize Katapy Live widgets.

Variable Default Type Description
data-display back share cc duration String List of optional UI components to be displayed as part of the widget.
title - display video and gallery titles
description - display video description underneath the video player
tz - display timezone icon on scheduled event widget
data-player-controls overlay String Media controls either remain visible all the time (fixed) or hide/show dynamically (overlay).
overlay, fixed
data-autostart yes String Autostart the video stream.
yes or no
data-poster http://embed.katapy.com/jswidget/img/Welcome-to-Katapy.png String Web Address to video poster image file.
data-player-bug http://embed.katapy.com/jswidget/img/katapyBug.png String Web Address to bug image file. Leave blank to hide bug.
data-player-bug-position top-right String Placement of bug on player
top-right, top-left, bottom-right, bottom-left
data-player-ads [blank] String Google IMA HTML5 Preroll Ad URL (http://...)
data-player-ga [blank] String Google Analytics ID (format UA-XXXXXXX-XX)
data-schedule-align right String Placement of event schedule relative to player.
right, below
data-schedule-videos 6 int Max. number of events displayed.
1-12
data-schedule-highlight D70000 String Background color in hex for highlighted event (coming up or currently playing).
any color represented in a 6 digit hex code
data-schedule-time-format 12h String Display event times in 12h or 24h format with or without timezones, or display relative time (e.g. Today in 2 hours)
12h, 12hz, 24h, 24hz, relative
data-schedule-timzone channel String Timezone settings: either display same times to all users (channel), or adapt to user's timezone (user)
channel, user