将视频元素的大小应用到引导模式，同时缩放

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

在这里，你去与更新的拨弄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 &要被从所计算出的高度&宽度分别除去填充。