ClipManager - Total

by Vladimir

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<iframe id="content-iframe" src="http://jsfiddle.net/br3t/vdRtw/show/"></iframe>

<div  class="ui-widget-content" id="video-iframe">
    <div>Dock <span rel="1">[+]</span><span rel="-1">[-]</span></div>
<iframe  src="http://fiddle.jshell.net/br3t/gxVzK/show/" />
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#content-iframe {
    padding:0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}
#video-iframe {
    /*padding: 20px;*/
    width: 480px;
    height: 340px;
    cursor: pointer;
    background: #888;
    position:fixed !important;
    left:5px;
    top:5px;
    overflow:hidden;
}
#video-iframe:hover {
    /*padding: 30px 0 0;*/
}
#video-iframe iframe {
    width:100%;
    height:100%;
    /*border:5px solid red;*/
}

JavaScript

$('#video-iframe').draggable();
//('#video-iframe').resizable();
$('#video-iframe span').mousedown(function()
  {
      var rel = $(this).attr('rel'),
          k = 10,
          w = $('#video-iframe').width(),
          h = $('#video-iframe').height();
      $('#video-iframe').width(w + k * rel);
      $('#video-iframe').height(h + 0.75 * k * rel);
  });