title: Embedded Youtube video in jQuery UI resizable container
body: <p>I have a Youtube embed within a resizable div which works OK, but is very difficult to resize. It's as if the browser is struggling to deal with resizing the iframe at the same time as the container - and it freezes/jolts (especially when I try to make the container smaller).</p>
  
  <p>Here's my code</p>
  
  <pre><code>&lt;div class="video-container"&gt;
      &lt;iframe width="560" height="315" src="//www.youtube.com/embed/AVqsLU3LQyE" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and...</p>
  
  <pre><code>$("div.video-container").resizable();
  </code></pre>
  
  <p>and...</p>
  
  <pre><code>.video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px; height: 0; overflow: hidden;
      border:1px solid #000;
  }
  
  .video-container iframe,
  .video-container object,
  .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>And here's a fiddle: <a href="http://jsfiddle.net/JLTVS/" rel="nofollow">http://jsfiddle.net/JLTVS/</a></p>
  
  <p>Any ideas how I can make the resizing a bit smoother?</p>