[HTML5][javascript] video要素をドラッグ&ドロップでリサイズする方法について

VIDEOタグで表示した動画をドラッグ&ドロップでリサイズする方法がわかりません。
jqueryのresizableウィジェットを用いて実装しようと考えているのですがうまくいきません。

imgタグで画像を表示を表示した場合はうまくいきます。

jqueryはこちらのverを使用しています。

<link type="text/css" rel="stylesheet" href="jquery-ui-1.10.4.custom.min.css" />
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>

HTML
1<video id="myvideo" src="sample.mp4" controls width="400" height="300">
2	</video>
3
4

$(function(){
			$('#myvideo').resizable({
				aspectRatio:true
			});
});

そもそもvideoタグにresizableが対応していないのでしょうか...?
改善点、この方法ではできないようであれば別の方法を教えていただきたいです。
よろしくおねがいいたします。

追記
div要素video_wrap,video_wrap_wrapをvideo要素と同サイズに設定し、video_wrap_wrapに対してresizableを行えば動画のみリサイズされるという認識でした。
div要素を2つ追加する点がよく理解できていません。
よろしくお願いいたします。
また、img要素ではリサイズできてvideo要素ではリサイズできないのはなぜでしょうか？

行動規範の内容に同意します

回答2件

まえに作成していたプログラムに問題があり、単独で動かした場合に解決することができました。
組み合わせた時にうまく動くように考えていきたいと思います。

投稿2016/07/11 09:27

yuzusenbei

総合スコア19

kei344

2016/07/11 09:43

回答ありがとうございます！

行動規範の内容に同意します

ベストアンサー

【iPad上のSafariで幅100%のVIDEOタグの高さを取得できない - NoteBook】
http://www.keyton-co.jp/blog/article/2014-05-12-ipad-video

上記サイトのやり方で#video_wrapをつくり、その外側の要素に対してresizableを設定してみてはいかがでしょうか。

追記：

下記のようなテストをしましたが、比率を保ったまま拡大縮小できました。

HTML
1<!DOCTYPE html><html><head>
2<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
3<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
4<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
5<script>
6$(function() {
7	$( '#video_wrap_wrap, #video_wrap_wrap2' ).resizable( {
8		aspectRatio: true
9	} );
10} );
11</script>
12<style>
13#video_wrap_wrap {
14	width: 100px;
15}
16#video_wrap {
17	position: relative;
18	width: 100%;
19	padding-top: 75%;
20}
21#video_wrap > video {
22	position: absolute;
23	width: 100%;
24	height: 100%;
25	top: 0;
26}
27
28#video_wrap_wrap2 {
29	background-color: red;
30	height: 100px;
31	width: 100px;
32}
33</style>
34</head><body>
35<div id="video_wrap_wrap"><div id="video_wrap"><video src="sample.mp4" width="720" height="540"></video></div></div>
36<div id="video_wrap_wrap2"></div>
37</body></html>

投稿2016/07/10 07:35

編集2016/07/10 09:02

kei344

総合スコア69407

yuzusenbei

2016/07/10 08:24

ありがとうございます。 windowを小さくした時にリサイズされるようになったのですがwindow内の動画のみをリサイズすることができません... なにか手立てはないでしょうか...

kei344

2016/07/10 08:28 編集

「#video_wrapをつくり、その外側の要素に対して」という部分で提案しているつもりなのですが･･･。 <div id="video_wrap_wrap"><div id="video_wrap"><video src="" width="720" height="540"></video></div></div>

yuzusenbei

2016/07/10 08:40

申し訳ございませんでした。まだうまくいきません... お手数でなければ細く教えていただければ助かります...

kei344

2016/07/10 08:47

「うまくできない」とは「何をしたときに」「どうなると思って」「どうなったのか」を質問文に追記ください。

yuzusenbei

2016/07/11 09:13

ありがとうございます。解決いたしました。

kei344

2016/07/11 09:14

解決されたようでよかったです。どのように解決したのかを回答文にお書きいただけませんか？よろしくお願いします。