title: How to resize a Bootstrap Modal with a Carousel inside that has differing sized images, smoothly
body: <p>So I have a carousel inside of a modal...
  The carousel cycles through the images, but I have a video in there, so the sizing changes when I reach the video.<br>
  However, when the modal/carousel gets to the video from a picture (vice-versa) it has a horrible clunky resize.
  I would like a smooth transition between the sizes.
  Can anyone help
  P.s we cant define sizes in pixels as this must work with a variety of sizes</p>
  
  <pre><code>&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;x&lt;/button&gt;
                      &lt;h3 id="myModalLabel"&gt;So, Why Are We The Best?&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div id="myCarousel" class="carousel slide carousel-fade"&gt;
                          &lt;!-- Carousel items --&gt;
                          &lt;div class="carousel-inner"&gt;
                          &lt;div class="active item"&gt;
                              &lt;div class="video"&gt;
                                  &lt;iframe src="https://www.facebook.com/video/embed?video_id=640177702674225"&gt;&lt;/iframe&gt;
                                  &lt;/div&gt;
                                  &lt;hr&gt;&lt;/hr&gt;
                                  &lt;p&gt;Description&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="item"&gt;
                                  &lt;img src="img/Comp_1.jpg"&gt;
                                  &lt;hr&gt;&lt;/hr&gt;
                                  &lt;p&gt;Description&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="item"&gt;
                                  &lt;img src="img/Comp_2.jpg"&gt;
                                  &lt;hr&gt;&lt;/hr&gt;
                                  &lt;p&gt;Description&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="item"&gt;
                                  &lt;img src="img/Comp_3.jpg"&gt;
                                  &lt;hr&gt;&lt;/hr&gt;
                                  &lt;p&gt;Description&lt;/p&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                          &lt;!-- Carousel nav --&gt;
                          &lt;a class="carousel-control left" href="#myCarousel" data-slide="prev"&gt;&amp;lsaquo;&lt;/a&gt;
                          &lt;a class="carousel-control right" href="#myCarousel" data-slide="next"&gt;&amp;rsaquo;&lt;/a&gt;
                      &lt;/div&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>