title: Hide iframe until it's fully loaded
body: <p>I want to hide the iframe until it's loaded to avoid the white flashing that occurs. <strong>It happens all the time on Internet Explorer 11 and FireFox</strong> Sometimes on Chrome if the page is slow in loading.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="test"&gt;
  &lt;div class="hover"&gt;hover me&lt;/div&gt;
  &lt;div class="cool"&gt;cool&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body { background-color: black; }
  .hover { border: solid red; height: 40px; width: 40px; z-index: 1; color: white; }
  
  iframe {position: relative; left: 40px;  }
  
  .test { border: solid blue; position: absolute; height: 300px; width: 500px; z-index: 3; }
  
  .cool { border: solid purple; background-color: black; }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function(){
      $(".hover").on({
          mouseover: function(){
              $(this).next('.cool').html('&lt;iframe width="370" height="215" src="//tsn.com" frameborder="0" &gt;&lt;/iframe&gt;');
          }
      });
  });
  
  $(document).ready(function() {
      $('.test').hover(function() {
  
  
  
      }, function() {
          $('.cool').html('');
  
      });
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/LaL9nkup/9/" rel="nofollow">JS FIDDLE LINK</a></strong></p>