Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .checkbox-holder{style: "width: 200px; margin: 5px auto;"}
  %label{style: "display: inline-block; margin-right: 5px", for: "lock-axis"} Lock drag axis
  %input.text-option{id: "lock-axis", type: "checkbox", name: "lock-axis"}
-# moved the wrapper down to make a little room at the top for dragging the video around.
#stage-wrapper{:style => "width: 540px; height: 540px; transform: translate3d(-48px, 50px, 0px);"}
  -# scaled the size down to 50% to make it easier to move and resize this large video
  #stage-container{:height => "1080", :style => "width: 1080px; height: 1080px; transform-origin: left top 0px; transform: matrix(0.5, 0, 0, 0.5, 0, 0); background-color: rgb(255, 255, 255);", :width => "1080"}
    #stage{:height => "1080", :style => "width: 1080px; height: 1080px;", :width => "1080"}
      %video#vid1{src: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/CloudsMountainSkySunnyScenic.mp4", width: "1920px", height: "1080px", loop: ""}

    #video-resizer{style: "border: 1px dashed gray; width: 1920px; height: 1080px;"}
      .ui-resizable-handle.ui-resizable-ne{id: "ne", "data-clickable": "true"}
      .ui-resizable-handle.ui-resizable-se{id: "se", "data-clickable": "true"}
      .ui-resizable-handle.ui-resizable-sw{id: "sw", "data-clickable": "true"}
      .ui-resizable-handle.ui-resizable-nw{id: "nw", "data-clickable": "true"}
              
            
!

CSS

              
                @font-face
  font-family: 'Bebas Neue Bold' 
  font-style: normal
  font-weight: normal
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/bebas.ttf') format('truetype')

#stage-wrapper
  margin: 5px auto 15px
  clear: both
  position: absolute
  box-shadow: 0px 23px 49px 1px rgba(0,0,0,0.2)
  background: #ffffff
  border-top-left-radius: 4px
  border-top-right-radius: 4px
  top: auto
  left: -50%
  right: -50%

video
  position: absolute
  top: 0
  left: 0

#stage-container
  position: relative
  width: 800px
  height: 600px
  margin: 0
  // background: #ffffff
  z-index: 9
  border-bottom-left-radius: 4px
  border-bottom-right-radius: 4px
  video
    // opacity: 0
    z-index: -1

#stage
  width: 800px
  height: 600px
  overflow: hidden
  position: relative
  background: transparent
  position: relative
  font-family: sans-serif
  img.trans
    opacity: 0
    position: absolute
  .svg.inline path
    animation-fill-mode: forwards
    fill-rule: evenodd

#stage g.top
  z-index: 1000

#video-resizer
  position: absolute
  top: 0
  left: 0
  z-index: 10000
  cursor: move

.ui-resizable-handle
  background-color: rgba(0,0,0,.75)
  width: 12px
  height: 12px

.ui-resizable-se
  bottom: -5px
  right: -5px
              
            
!

JS

              
                // init variables
var companions, startX, startY, vid1 = $('video#vid1');
// just calling play on the video element and looping ( set in the video element itself ) for grins.
vid1[0].play();

// sets the ui-resizable handles' positions
var set_position = function(width, height){
  $('.ui-resizable-n').css('left', (width/2-6)+'px');
  $('.ui-resizable-e').css('top', (height/2-6)+'px');
  $('.ui-resizable-s').css('left', (width/2-6)+'px');
  $('.ui-resizable-w').css('top', (height/2-6)+'px');
};
// setting the resizable to a variiable so it can be used to reset Draggable's lockAxis parameter when the Lock drag axis checkbox is changed.
var D = $( "#video-resizer" ).resizable({ 
  aspectRatio: true,
  handles: {
    'ne': '.ui-resizable-ne',
    'se': '.ui-resizable-se',
    'sw': '.ui-resizable-sw',
    'nw': '.ui-resizable-nw'
  },
  grid: [ 2, 2 ],
  create: function( event, ui ) {
    // see the resize function for explanation of what's being set here
    var width = $(event.target).width();
    var height = $(event.target).height();
    set_position(width, height);
  },
  resize: function(event, ui){
    // event.target is the #video-resizer element so get its height and width
    var width = $(event.target).width();
    var height = $(event.target).height();
    // reset the resizer's handle positions to the new height and width
    set_position(width, height);
    // ui.position contains {left: val, top: val} for the resizer element so can use those values in combo with 
    // height and width to set the left, top, height & width values for the video as the handles are dragged.
    TweenLite.set(vid1,{left: ui.position.left, top: ui.position.top, width: ui.size.width, height: ui.size.height});
  }
});

// setting _gsTransform on an element creates the ._gsTransform object on it. 
// NOTE: GSAP sets the ._gsTramsform object on the specific dom element so if you use jQuery to get that object, you have to add the array element index like $('video#vid1')[0]. 
TweenLite.set("#video-resizer", {x:"+=0"});
TweenLite.set("video#vid1", {x:"+=0"});

Draggable.create("#video-resizer", {
  lockAxis: false,
  onPress:function() {
    companions = [];
    startX = this.x;
    startY = this.y;
    var vid = $('video#vid1');
    // ( jQuery returns an array even if there's only one element so have to use vid[0] )
    companions.push({element: vid, x:vid[0]._gsTransform.x, y:vid[0]._gsTransform.y});
    TweenLite.killTweensOf("video");
  },
  onDrag:updateCompanions,
  onThrowUpdate:updateCompanions,
  throwProps:true
});


function updateCompanions() {
  var i = companions.length,
      deltaX = this.x - startX,
      deltaY = this.y - startY,
      companion;
  while (--i > -1) {
    companion = companions[i];
    TweenLite.set(companion.element, {x:companion.x + deltaX, y:companion.y + deltaY});
  }
}

$('#lock-axis').on("change", function(){
  if( $(this).prop("checked") ) {
    Draggable.get(D).lockAxis = true;
  } else {
    Draggable.get(D).lockAxis = false;
  }
});
              
            
!
999px

Console