title: play icon youtube video div overlay
body: <p>I have an image nav but the client wants to add a video icon via the product description.</p>
  
  <p><img src="https://i.stack.imgur.com/zsQik.png" alt="enter image description here"></p>
  
  <p>When the user clicks on the video icon it should overlay the youtube video on top of the main product image. Kinda like hiding it and just showing the video.</p>
  
  <p>I cannot find any jquery plugin that can do this? </p>
  
  <p>Here is some example markup which i have created, when you click play on the icon i want the youtube video to be played inside of the red box on top of the image. </p>
  
  <p><strong>Look at my example:</strong> <a href="http://jsfiddle.net/mC5c3/4/" rel="nofollow noreferrer">http://jsfiddle.net/mC5c3/4/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="product-image"&gt;
  &lt;img src="http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg" alt="http://www.skriftlig.com/konfliktmegling/wp-content/uploads/2010/02/Photoxpress_2658886-480x220.jpg"&gt;
  &lt;/div&gt;
  
      &lt;div class="image-nav"&gt;
      &lt;/div&gt;
  
      &lt;div class="icon"&gt;
          &amp;nbsp
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>div.container
  {
      margin:10px 10px auto;
      border:1px solid orange;
  }
  
  div.product-image
  {
      height:220px;
      width:480px;
      border:1px solid red;  
      margin:30px;        
  }
  
  div.image-nav
  {
      border:1px solid black;
      width:500px;
      height:100px;
      margin:30px;
  }
  
  div.icon
  {
  background-image: url("http://i.stack.imgur.com/zsQik.png");
      background-repeat: no-repeat;
      height: 50px;
      left: 540px;
      position: relative;
      top: -104px;
      width: 50px;
  }
  </code></pre>
  
  <p><strong>edit:</strong></p>
  
  <ol>
  <li>It should be based on the icon click.</li>
  <li>and show and hide based on the click of the icon.    </li>
  <li>The video needs to be embeded in the icon div so the client can change the video.</li>
  </ol>
  
  <p><strong>I added a click event and resized the video</strong></p>
  
  <pre><code>var $video=$('&lt;iframe width="480" height="220" src="http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
  var $productImage=$('.product-image');
  var $icon=$('.icon');
  $icon.on('click',function()
  {
      $('.product-image').append($video);
  });
  </code></pre>
  
  <p>​</p>