jquery - 缩放时将视频元素的大小应用于 Bootstrap 模式

Question

我目前正在尝试使用 Bootstrap 来获得一个可以移动的可调整大小的模式。到目前为止，我都可以正常工作，但我遇到了缩放问题。如果我通过单击并拖动缩放图标来缩小模式并仅在一个轴上缩放它，视频就会脱离模式。那么我如何确保模态接收视频元素的当前高度并将其应用到它自己的高度？有没有一种使用 jquery 或 CSS 的简单方法？

https://jsfiddle.net/pdh4cmuf/23/

$('.modal-content').resizable({
    //alsoResize: ".modal-dialog",
    minHeight: 150,
    minWidth: 200
});
$('.modal-dialog').draggable();

$('#myModal').on('show.bs.modal', function () {

    $(this).find('.modal-body').css({
        'max-height':'100%'
    });

});
 $('.modal-backdrop').removeClass("modal-backdrop");    



$(window).load(function () {
            $('#myModal').modal({ backdrop: 'static', keyboard: false});
            $('#myModal').modal('show');
        });

function myFunction() {
            $('#myModal').modal('toggle');
            window.alert('Hello');
        }

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

      </div>
      <div class="modal-body">
       <object class="embed-responsive-item">
<video controls>
    <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <p>Your browser does not support H.264/MP4.</p>
</video>
</object>
    </div>
  </div>
</div>


.modal {
  pointer-events: none;
  }
.modal-backdrop {
  display: none;
  }

.vertical-alignment-helper {
            display:table;
            height: 100%;
            width: 100%;
            pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
        }
        .vertical-align-center {
            /* To center vertically */
            display: table-cell;
            vertical-align: middle;
            pointer-events:none;
        }
        .modal-content {

            margin: 0 auto;
            pointer-events: all;
            float: left;

            background-color: #ffffff;
        }
        .textarea-nonresizable {
            height: 10em;
            border-radius: 1em;
            resize: none; /* prevents the user-resizing, adjust to taste */
        }
video {
  width: 100%;
  height: auto!important;
}

Answer 1

这是更新后的 fiddle https://jsfiddle.net/pdh4cmuf/26/

**Updated JS**
$('.modal-content').resizable({
    alsoResize: "#video",
    minHeight: 150,
    minWidth: 200
}).bind({
    resizestop: function(event, ui){

        $('video').css({
            'height':ui.size.height - 60,
            'width': ui.size.width - 30
        });
    }
});

-60和-30分别是从计算的高度和宽度中删除的填充。