checking if an iframe exists and then creating HTML markup using jquery
<p>I am trying to create the HTML markup using jquery:</p>

<pre><code>&lt;div class="icon"&gt;&lt;/div&gt;
</code></pre>

<p>If the youtube video exists on the page then create the above markup:</p>

<pre><code>if ($('div.container iframe').length) {
  alert('frame exists');
  $('&lt;div class="icon"&gt;&lt;/div&gt;');
}
</code></pre>

<p>However its not create the markup.
I want the user to paste a youtube video then my Jquery should create the icon automatically for them. Please look at my implementation:</p>

<pre><code>var $video = $('div.container iframe');  //location of video
var $productImage = $('.product-image'); //location of main prod img
var $icon = $('.icon');                  //location of icon

//check if video exists
if ($('div.container iframe').length) {
    alert('frame exists');
  $('&lt;div class="icon"&gt;&lt;/div&gt;');

}

$('.product-image').append($video);      //append the video to the main prod img

$icon.on('click', function() {           //click
    $video.toggle();                     //toggle the video based on click
});
</code></pre>

<p><strong>JSFIDDLE:</strong> <a href="http://jsfiddle.net/t7qMF/7/" rel="nofollow">http://jsfiddle.net/t7qMF/7/</a>
<strong>SOLUTION:</strong> <a href="http://jsfiddle.net/t7qMF/13/" rel="nofollow">http://jsfiddle.net/t7qMF/13/</a></p>
