Quick Use

manuman94 edited this page May 7, 2014 · 12 revisions

Quick use

To use ytCropper, you have to include to your HTML project the JQuery and JQuery UI libraries plus the ytCropper library.

// JQuery include
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
// JQuery UI include
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/jquery-ui-git.css" />
// ytCropper include 
<script src="ytCropper/ytCropper.js"></script>
<link rel="stylesheet" type="text/css" href="ytCropper/ytCropper.css" />

When added, you can start using the ytCropper class. The initialization of ytCropper is simple, you have to create a new instance of ytCropper and specify its parameters:

  • Class constructor:
    ytCropper(idcont,{ idvid , width, height, maxRange, minRange}, playerOptions)

  • Parameters:
    idcont -> the div container's id
    idvid -> YouTube hosted video ID
    width -> Player width
    height -> Player height
    maxRange -> Max range of the handle interval (in seconds)
    minRange -> Min range of the handle interval (in seconds)


cropper = new ytCropper("#playerWrapper", {
    idvid: "ZMJ2UJI4onI",
    width: '640',
    height: '390',
    maxRange: 60,
    minRange: 5

That will setup a YouTube video cropper on a div with id "playerWrapper", the video with YouTube ID "ZMJ2UJI4onI", 640x390px and the cut's length will be max 60 seconds and min 10 seconds.

You can test this here: http://jsfiddle.net/BxQhy/18/

When you have your YouTube Cropper ready, you can use the methods to obtain and set the handle values, listeners to implement event functions, and more. More tutorials about it on this wiki.