스케일링하는 동안 비디오 요소의 크기를 부트 스트랩 모달에 적용

저는 현재 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;
}