a project by: José Manuel Blasco Galdón
ytCropper, the javascript library to crop YouTube videos inside your website. It is an opensource project, so you can feel free to download it, change it and use it.
Download
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>

// 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)


Example:
// JQuery include
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/9/


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.



José Manuel Blasco Galdón, 10/04/2014