title: Apply size of video element to bootstrap modal while scaling
body: <p>I'm currently trying to use Bootstrap to get a resizable modal which i can move around. So far i got that both working but i'm having a scaling issue. If i make the modal smaller by clicking and dragging the scaling icon and scale it only on one axis, the video gets out of the modal. So how do i make sure that the modal receives the current height of the video element and applies it to it's own height? Is there an easy way with jquery or CSS?</p>
  
  <p><a href="https://jsfiddle.net/pdh4cmuf/23/" rel="nofollow noreferrer">https://jsfiddle.net/pdh4cmuf/23/</a></p>
  
  <pre><code>$('.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');
          }
  
  &lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt;
    Launch demo modal
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
         &lt;object class="embed-responsive-item"&gt;
  &lt;video controls&gt;
      &lt;source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"&gt;
      &lt;p&gt;Your browser does not support H.264/MP4.&lt;/p&gt;
  &lt;/video&gt;
  &lt;/object&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  .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;
  }
  </code></pre>