How to resize Twitter Bootstrap modal dynamically based on the content

Question

I have database content which has different types of data, such as Youtube videos, Vimeo videos, text, Imgur pictures, etc. All of them have different heights and widths. All I have found while searching the Internet is changing the size to only one parameter. It has to be same as the content in the popup.

This is my HTML code. I also use Ajax to call the content.

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>         <h3 id="ModalLabel"></h3>     </div>     <div class="modal-body">      </div> </div>  

Answer 1

This worked for me, none of the above worked.

.modal-dialog{     position: relative;     display: table; /* This is important */      overflow-y: auto;         overflow-x: auto;     width: auto;     min-width: 300px;    }