Thanks Carvel Avis / Swampthang,
I found the jewels. Only needed this. Works beautifully! Hard to find, extremely useful piece of excellent coding!
best regards,
Harry
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Video Resizer</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css'> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <video id='vid1' loop='' controls autoplay> <source src="http://qa.jwplayer.com/~todd/sintel.mp4" width="640" height="272" type="video/mp4"> <p>Your browser doesn't support the HTML5 video tag it seems.</p> </video> <div id='video-resizer' style='border: 1px dashed gray; width: 640px; height: 272px;'> <div class='ui-resizable-handle ui-resizable-ne' data-clickable='true' id='ne'></div> <div class='ui-resizable-handle ui-resizable-se' data-clickable='true' id='se'></div> <div class='ui-resizable-handle ui-resizable-sw' data-clickable='true' id='sw'></div> <div class='ui-resizable-handle ui-resizable-nw' data-clickable='true' id='nw'></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/81395/Draggable.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script> </body> </html>
