title: show hide youtube video on click
body: <p><strong>Q1)</strong> On page load is it possible with Jquery to check the file name of the image and then set the css to position it on the page? </p>
  
  <p><strong>Q2)</strong> What is the easiest way to manage this, the user will not be embedding the iframe code inside the div.icon</p>
  
  <p>I have a play button icon which will be in the product description in an ecommerce website. When the user clicks play it will show the youtube video exactly inside the product-image div box. The icon will be positioned next to the image nav icons so the user has an option to see the video while browsing the pics.</p>
  
  <p>It seems to work nice here is my code:</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;
        &lt;iframe width="480" height="220" src=
        "http://www.youtube-nocookie.com/embed/jvTv_oatLA0?rel=0" frameborder="0"
        allowfullscreen=""&gt;&lt;/iframe&gt;
      &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://i46.tinypic.com/zmmbo8.png");
      background-repeat: no-repeat;
      height: 50px;
      left: 540px;
      position: relative;
      top: -104px;
      width: 50px;
      cursor:pointer;
  }
  
  div.icon iframe
  {
      display:none;
      position:relative;
      top:30px;
  }
  
  div.product-image iframe
  {
      position: absolute;
      top: 42px;
      left:42px;
  }
  </code></pre>
  
  <p><strong>JQ:</strong></p>
  
  <pre><code>var $video=$('div.icon iframe');
  var $productImage=$('.product-image');
  var $icon=$('.icon');
  $icon.on('click',function()
  {
      $('.product-image').append($video);
  });
  </code></pre>
  
  <p><strong>jsfiddle:</strong>
  <a href="http://jsfiddle.net/t7qMF/2/" rel="nofollow">http://jsfiddle.net/t7qMF/2/</a></p>