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/gallery-video.js?cd=visitorsites&library=ny2c&lvl=1&id=709" data-display="title duration cc" data-player-placement="fullscreen" data-font-color="404040" data-autostart="no" 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 VOD 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.
back - display back button on top after navigating page to page
breadcrumb - display breadcrumb navigation on top after navigating page to page
search - display video search box on top
title - display video and gallery titles
description - display video description underneath the video player
cc - display closed captions (if available)
share - display share buttons
duration - display duration on thumbnails
data-font-color 404040 String Font color in hex for loading icon, titles, description, breadcrumb and back button.
any color represented in a 6 digit hex code
data-layout grid String Layout of video thumbnails, either reponsive multi-row grid or single row slider.
grid, slider
data-presentation inorder String Order of video thumbnails.
inorder, reverseorder, popular, recent, random
data-max-row-items 3 int Number of video thumbnail columns.
1-12 for row slider. For grid layout: 1,2,3,4,6,12
data-max-items 18 int Maximum number of video thumbnails.
1 - 100
data-image-ratio 16-9 String Display aspect ratio (DAR) of video thumbnails.
16-9, 4-3, 3-2, square, circle, 3-4, 2-3
data-caption-placement below String Placement of video thumbnail captions relative to the thumbnail image.
below, fixed, overlay
data-caption-align left String Text Alignment of video thumbnail captions.
left, center, right
data-caption-size medium String Relative size of video thumbnail title.
small, medium, large
data-caption-title gallerytitle String Dynamic title element of video thumbnails.
gallerytitle, videotitleshort, videotitleshortandepisode, videotitlelong, none
data-caption-description-1 videotitleshort String Dynamic description element of video thumbnails.
videotitleshort, videotitleshortandepisode, videotitlelong, gallerytitle, tagline, description, descriptionlong, descriptionvlong, duration, episodenumduration, author, none
data-caption-description-2 episodenumduration String Second dynamic description element of video thumbnails.
videotitleshort, videotitleshortandepisode, videotitlelong, gallerytitle, tagline, description, descriptionlong, descriptionvlong, duration, episodenumduration, author, none
data-duration-format mins String Format of duration badge and/or captions of video thumbnails.
mins, hourmin, minsec
data-icon-style play String Play icon shape/style for video thumbnails.
play, play-circle, play-circle-o, none
data-icon-placement center String Play icon placement on video thumbnails.
center, top-left, bottom-left
data-player-placement fullscreen String Placement of video player after a video thumbnail is clicked.
fullscreen, popup, inline, replace
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-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)