Question

I am trying to create the HTML markup using jquery:

<div class="icon"></div>

If the youtube video exists on the page then create the above markup:

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

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:

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');
  $('<div class="icon"></div>');

}

$('.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
});

JSFIDDLE: http://jsfiddle.net/t7qMF/7/
SOLUTION: http://jsfiddle.net/t7qMF/13/

Answer 1

First check if iframe exists or not and if exists then append icon div –

if ($('div.container iframe').length > 0) {
    alert('frame exists');
    $('.container').append('<div class="icon">Icon</div>');
}

Updated Fiddle – http://jsfiddle.net/t7qMF/11/