Нажав на div, скрывает div и заменяет другой

Question

Я пытаюсь создать видеоплеер, где, если вы щелкнете изображение, оно меняет изображение на видео с YouTube. Код работал нормально, пока я не захотел поставить div поверх кнопки для игрока.

Теперь, конечно, эта кнопка находится в пути и не будет распознавать событие click. Как узнать, когда вы нажимаете «play» div, который скрывает этот div, и меняет другое изображение div для видео с YouTube.

Вот код:

$(document).ready(function(){ 
    $('#play').click(function(){ 
     $('#play').hide(); 
     $('img').function() { 
      video = '<iframe src="' + $(this).attr('data-video') + '" width="100%" height="100%" frameborder="0"></iframe>'; 
      $(this).replaceWith(video); 
    }); 
}); 

Я до сих пор действительно новичок в JQuery и не понимаю, как именно план и функция вызова работы. Ваше понимание действительно поможет!

Спасибо :)

Answer 1

Здесь вы идете:

http://jsfiddle.net/tvyfxey6/6/

$('#play').on('click', function(evt) { 
     alert('click'); 
    $('#play').hide(); 
     $('#img').hide(); 
    $('#video').html('<iframe src="' + $('#video').attr('data-video') + '" width="100%" height="100%" frameborder="0"></iframe>'); 

});