title: creating div and image overlay over a video that hides on click
body: <p>I need something like this. <a href="http://jsfiddle.net/2fAxv/1/" rel="nofollow">http://jsfiddle.net/2fAxv/1/</a>
  But the second <code>div</code> <code>#hide</code>should be on the top left of the screen with some margin. Can't figure that out. Also, once the image is clicked on the youtube video shrinks to a default size.Is there a way to fix it's size in the same code without using <code>&lt;iframe&gt;</code></p>
  
  <p>html</p>
  
  <pre><code>&lt;div class="vid"&gt;
      &lt;img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" /&gt;
      &lt;div id="hide1"&gt;
          &lt;h3&gt;johnny Depp&lt;br&gt;&lt;span&gt;Acting Technique&lt;/span&gt;&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.vid {
  width: 350px;
  height: 298px;
  float: left;
  margin: 20px 25px 70px 70px;
  background-size: cover;
  background-position: 0px -50px;
  background-repeat: none;
  }
  .vid div {
   overflow: hidden;
   height: 298px;
   width: 300px;
   background-color: rgba(255, 255, 255, 0.32); 
   }
   .vid div h3 {
   position: absolute;
   color: black;
   font-family: 'Montserrat', sans-serif;
   font-size: 30px;
   font-weight: bold;
   padding: 10px;
   background-color: rgba(255,255,255,0.8);
   margin-left: 30px;
   max-width: 450px;
   }
   .vid div h3 span {
   color: black;
   text-align: center;
   width: 300px;
   font-family: 'Source Sans Pro', sans-serif;
   font-style: italic;
   font-weight: 400;
   font-size: 19px;
   }
  </code></pre>
  
  <p>function</p>
  
  <pre><code>$('#hide').click(function() {
      video = '&lt;iframe src="' + $(this).attr('data-video') + '"&gt;&lt;/iframe&gt;';
      $(this).replaceWith(video);
      $('#hide1').hide();
  });
  </code></pre>