KrikKrak
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by KrikKrak
-
-
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
-
The Floatbox Player for html5 on https://floatboxjs.com/demo is exactly what I want to create (but code is not open source).
-
Thanks swampthang and OSUblake.
I combined two pen's:
'
See the Pen VvRoWy by chriscoyier (@chriscoyier) on CodePen
'
'See the Pen xeatn by jonathan (@jonathan) on CodePen
'into a new pen '
See the Pen LzNyOW by KrikKrak (@KrikKrak) on CodePen
'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?
-
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
See the Pen qLAwj?limit=all%26page=5%26q=Draggable.create by jamiejefferson (@jamiejefferson) on CodePen
Draggable Resize
in GSAP
Posted
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>