A Pen by Chris Coyier.

index.html

<div class="resize">
  <p data-height="257" data-theme-id="1" data-slug-hash="gHnGD" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/chriscoyier/pen/gHnGD'>Transformer Tabs</a> by Chris Coyier (<a href='http://codepen.io/chriscoyier'>@chriscoyier</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
  <script async src="//codepen.io/assets/embed/ei.js"></script>
  <div class="cover"></div>
</div>

Make-a-CodePen-Embed-Resizeable.markdown

Make a CodePen Embed Resizeable

A Pen by Chris Coyier on CodePen.

License.

script.js

$(".resize").each(function() {
  
  var el = $(this);
  var height = el.height();
  var cover = el.find("> .cover");
  
  el.resizable({
    minHeight: height,
    maxHeight: height,
    minWidth: 320,
    start: function() {
      cover.show();
    },
    stop: function() {
      cover.hide();
    }
  });
  
});

style.css

html {
  background: black;
}
html, body { 
  height: 100%; 
}
body {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 20px 0;
}

.resize {
  position: relative;
}
.resize > .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}