Größe des Videoelements auf Bootstrap modal während der Skalierung anwenden

Question

Ich versuche gerade Bootstrap zu verwenden, um ein resizierbares Modal zu erhalten, mit dem ich mich bewegen kann. Bisher habe ich beide funktioniert, aber ich habe ein Skalierungsproblem. Wenn ich das Modal verkleinere, indem ich auf das Skalierungssymbol klicke und es ziehe und es nur auf einer Achse skaliere, verlässt das Video das Modal. Wie stelle ich also sicher, dass das Modal die aktuelle Höhe des Videoelements erhält und auf seine eigene Höhe anwendet? Gibt es einen einfachen Weg mit Jquery oder 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

Hier gehen Sie mit der aktualisierten Geige 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 sind die Polster jeweils von der berechneten Höhe & Breite entfernt werden.