title: How to close the gap between a scaled down iframe and the next element?
body: <p><a href="https://i.stack.imgur.com/AZ7T4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AZ7T4.png" alt="enter image description here" /></a></p>
  <p>I have an iframe that I scaled down to 65% but even though it has shrunk, the &quot;div&quot; still occupies 100% of the original iframe size and as a result, there is a huge gap between the iframe and the next element. I don't know to close the gap. I want the next element to be right underneath the embedded iframe.
  HTML code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media only screen and (min-width:768px){
    .container-iframe{
      -moz-transform: scale(0.65, 0.65); 
      -webkit-transform: scale(0.65, 0.65); 
      -o-transform: scale(0.65, 0.65);
      -ms-transform: scale(0.65, 0.65);
      transform: scale(0.65, 0.65); 
      -moz-transform-origin: center;
      -webkit-transform-origin: center;
      -o-transform-origin: center;
      -ms-transform-origin: center;
      transform-origin: center;
    }
    .iframe-responsive{
      bottom: 0;
      float: center;
      height: 100%;
      left: 0;
      position:absolute;
      right: 0;
      top: 0;
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-iframe"&gt;
      &lt;iframe class="iframe-responsive" src="https://www.youtube.com/embed/chw2oMUrh4U"&gt;&lt;/iframe&gt;
  &lt;/div&gt;  
  &lt;div class="row"&gt;
    &lt;div class="col" style="text-align: center;"&gt;
      &lt;h1&gt;Something 1&lt;/h1&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col" style="text-align: center;"&gt;
      &lt;h1&gt;Something 2&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>