iframe inside gridstack item

by Julien CAVALEIRO

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script>
<div id="mainDynTab:sandboxBean_formBody:j_id_3j_2_1_5_3" class="grid-stack" data-gs-width="12" data-gs-height="0" data-gs-animate="true">
  <div id="mainDynTab:sandboxBean_formBody:_1" class="grid-stack-item" data-widget="widget_mainDynTab_sandboxBean_formBody__1" data-gs-x="0" data-gs-y="0" data-gs-width="6" data-gs-height="2" data-gs-min-width="2" data-gs-min-height="2" data-gs-no-move="true"
  data-gs-no-resize="true" data-gs-gs-locked="true">
    <div id="mainDynTab:sandboxBean_formBody:_1_container_content" class="grid-stack-item-content" style="text-align: center;">
      <div id="mainDynTab:sandboxBean_formBody:_1_header" class="grid-stack-item-header">
        <span>1</span>
        <a id="mainDynTab:sandboxBean_formBody:_1_closer" href="#" class="grid-stack-item-header-icon">
          <span class="fa fa-times"></span>
        </a>
        <hr>
      </div>
      <div id="mainDynTab:sandboxBean_formBody:_1_content" class="grid-stack-item-child">
        1
      </div>
    </div>
  </div>
  <div id="mainDynTab:sandboxBean_formBody:_2" class="grid-stack-item" data-widget="widget_mainDynTab_sandboxBean_formBody__2" data-gs-x="6" data-gs-y="0" data-gs-width="6" data-gs-height="2" data-gs-min-width="2" data-gs-min-height="2">
    <div id="mainDynTab:sandboxBean_formBody:_2_container_content" class="grid-stack-item-content" style="text-align: center;">
      <div id="mainDynTab:sandboxBean_formBody:_2_header" class="grid-stack-item-header">
        <span>2</span>
        <a id="mainDynTab:sandboxBean_formBody:_2_closer" href="#" class="grid-stack-item-header-icon">
          <span class="fa fa-times"></span>
        </a>
        <hr>
      </div>
      <div...

CSS

:root .grid-stack-item > .ui-resizable-handle {
  filter: none;
}

.grid-stack {
  position: relative;
}

.grid-stack.grid-stack-rtl {
  direction: ltr;
}

.grid-stack.grid-stack-rtl > .grid-stack-item {
  direction: rtl;
}

.grid-stack .grid-stack-placeholder > .placeholder-content {
  border: 1px dashed lightgray;
  margin: 0;
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  bottom: 0;
  width: auto;
  z-index: 0 !important;
  text-align: center;
}

.grid-stack > .grid-stack-item {
  min-width: 8.3333333333%;
  position: absolute;
  padding: 0;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
  margin: 0;
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  bottom: 0;
  width: auto;
  z-index: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
}

.grid-stack > .grid-stack-item > .ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}

.grid-stack > .grid-stack-item.ui-resizable-disabled > .ui-resizable-handle,
.grid-stack > .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {
  display: none;
}

.grid-stack > .grid-stack-item.ui-draggable-dragging, .grid-stack > .grid-stack-item.ui-resizable-resizing {
  z-index: 100;
}

.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content,
.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content, .grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content,
.grid-stack > .grid-stack-item.ui-resizable-resizing > .grid-stack-item-content {
  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
  opacity: 0.8;
}

.grid-stack > .grid-stack-item > .ui-resizable-se,
.grid-stack > .grid-stack-item > .ui-resizable-sw {
  background-image:...

JavaScript

/**
 * gridstack.js 0.2.5-dev
 * http://troolee.github.io/gridstack.js/
 * (c) 2014-2016 Pavel Reznikov
 * gridstack.js may be freely distributed under the MIT license.
 * @preserve
*/
!function(a){if("function"==typeof define&&define.amd)define(["jquery","lodash","jquery-ui/core","jquery-ui/widget","jquery-ui/mouse","jquery-ui/draggable","jquery-ui/resizable"],a);else if("undefined"!=typeof exports){try{jQuery=require("jquery")}catch(b){}try{_=require("lodash")}catch(b){}a(jQuery,_)}else a(jQuery,_)}(function(a,b){var c=window,d=function(a,b,c){var d=function(){return console.warn("gridstack.js: Function `"+b+"` is deprecated as of v0.2.5 and has been replaced with `"+c+"`. It will be **completely** removed in v1.0."),a.apply(this,arguments)};return d.prototype=a.prototype,d},e=function(a,b){console.warn("gridstack.js: Option `"+a+"` is deprecated as of v0.2.5 and has been replaced with `"+b+"`. It will be **completely** removed in v1.0.")},f={isIntercepted:function(a,b){return!(a.x+a.width<=b.x||b.x+b.width<=a.x||a.y+a.height<=b.y||b.y+b.height<=a.y)},sort:function(a,c,d){return d=d||b.chain(a).map(function(a){return a.x+a.width}).max().value(),c=-1!=c?1:-1,b.sortBy(a,function(a){return c*(a.x+a.y*d)})},createStylesheet:function(a){var b=document.createElement("style");return b.setAttribute("type","text/css"),b.setAttribute("data-gs-style-id",a),b.styleSheet?b.styleSheet.cssText="":b.appendChild(document.createTextNode("")),document.getElementsByTagName("head")[0].appendChild(b),b.sheet},removeStylesheet:function(b){a("STYLE[data-gs-style-id="+b+"]").remove()},insertCSSRule:function(a,b,c,d){"function"==typeof a.insertRule?a.insertRule(b+"{"+c+"}",d):"function"==typeof a.addRule&&a.addRule(b,c,d)},toBool:function(a){return"boolean"==typeof a?a:"string"==typeof a?(a=a.toLowerCase(),!(""===a||"no"==a||"false"==a||"0"==a)):Boolean(a)},_collisionNodeCheck:function(a){return a!=this.node&&f.isIntercepted(a,this.nn)},_didCollide:function(a){return...