將視頻元素的大小應用到引導模式，同時縮放

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 &要被從所計算出的高度&寬度分別除去填充。