jQuery UI resizable maintain aspect ratio without extra white space


I have a jQuery UI panel box which has an embedded YouTube video. I have made the panel resizable. I’m looking to maintain aspect ratio of the panel box without having so much whitespace on the bottom of the box when it’s resized large.

My panel box starts out as 470px height x 525px width. By using aspectRatio: true as a jQuery resizable option, I get the whitespace on the bottom of the box. Using an online calculator, it tells me my aspect ratio is 105 / 94. Forcing this aspect ratio has the same effect.

Here’s a jsfiddle, where I’ve modified it a little bit.


For those who don’t want to view jsfiddle, here’s the code:

<div id="video" class="video panel panel-default draggable">
  <button type="button" class="video close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <div class="panel-heading draggable-handler">Stream</div>
  <div class="panel-body">
    <div class="videowrapper">
      <iframe width="100%" height="auto" src="https://www.youtube.com/embed/live_stream?channel=UClnQCgFa9lCBL-KXZMOoO9Q" frameborder="0" allowfullscreen></iframe>
    <div class="info_outer">
      <div class="row">
        <div class="col-xs-6"><span class="info">Info Panel</span></div>
        <div class="col-xs-6"><span class="info">More Info</span></div>
    <div class="clear"></div>
    <div id="copyright" class="copyright alert alert-danger">
      Copyright area
    <div id="SocialBar" class="SocialBar">
      <a class="btn btn-social login-twitter" href="https://twitter.com/intent/tweet?text='+shareText+'" target="_blank"><span class="fa fa-twitter"></span> Share on Twitter</a>
      <a class="btn btn-social login-facebook" href="https://www.facebook.com/sharer/sharer.php?u=" target="_blank"><span class="fa fa-facebook"></span> Share on Facebook</a>
      <button type="button" class="openChaserChat btn btn-social btn-pinterest" id="'+chaser_id+'"><span class="chaserChatIcon fa fa-comment"></span> Open Chat</button>

Some CSS:

.panel {
  width: 525px;
  height: 470px;
  top: 140px;
  left: 10px;

.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    /*padding-top: 25px;*/
    height: 0;
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

And the jQuery

  aspectRatio: true,
  minWidth: 525,
  minHeight: 470,

  handle: ".draggable-handler"

I understand the whitespace is there to maintain the aspect ratio; but perhaps there’s a way to reduce it?

If you remove the aspectRatio: true, and drag the SW corner, elements fall out of the panel. Maybe there’s a fix with this method instead?

Link: jQuery UI resizable maintain aspect ratio without extra white space
Source: Stack Jquery


About Author

Leave A Reply