Jump to content


  • Posts

  • Joined

  • Last visited

KrikKrak's Achievements



  1. 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>
  2. now that I looked more carefully, the pen of swampthang is fantastic!: I just need to change the dimensions and some parameters. Although that is not very simple. The code is rather complicated. Is everything needed or did it came from a project that needed more coding? Anyway, thanks a lot!! best regards, Harry
  3. The Floatbox Player for html5 on https://floatboxjs.com/demo is exactly what I want to create (but code is not open source).
  4. Thanks swampthang and OSUblake. I combined two pen's: 'https://codepen.io/chriscoyier/pen/VvRoWy' 'https://codepen.io/jonathan/pen/xeatn' into a new pen 'https://codepen.io/KrikKrak/pen/LzNyOW' However, the svg handle does not work. Therefore, I attached the file here. You can resize using the bottom right corner, although the icon is not visible. As you can see both the dragging and resizing behavior is erratic. What did I do wrong? Resize and drag video.rar
  5. is it possible to drag and resize a video with this code from Jamie Jefferson? Dragging seems to work, but I did not manage to resize a video . thanks in advance, Harry