[Ilya_Ru]

Добрый день, Возникла потребность подгрузки iframe с youtube по щелчку после загрузки страницы. Очень нужно, чтобы отображение было в кнопке или перекрывая её. Существует такой код:

<style>
	#click {
	background:#000000 url(http://php-ilyaru.rhcloud.com/moysite/vrekl.jpg) center center;
  background-size:contain;
  background-repeat: no-repeat;
  width:100%;
  height:240px;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin:0px;
}
#click:hover {
   background: #000000 url(http://php-ilyaru.rhcloud.com/moysite/vrekl2.jpg) center center;
  background-size:contain;
  background-repeat: no-repeat;
  width:100%;
  height:240px;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin:0px;
}
</style>

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(function(){
    $('#click').on('click', function(){
        var ifr=$('<iframe/>', {
            id:'MainPopupIframe',
            src:'https://www.youtube.com/embed/wz-hXgICljc?rel=0&autoplay=1',
            style:'display:none;width:100%;height:240px;border:none;z-index:10;position:relative;',
            load:function(){
                $(this).show();
                
            }
        });
        $('#click').append(ifr);    
    });
});

</script>
<button id='click'></button>

НО! Существует проблема: в некоторых браузерах (например в firefox) над iframe как бы существует невидимая кнопка, при каждом нажатии на iframe открываются новые и новые экземпляры iframe. Z-index не помогает, или я не туда его пишу... Помогите, плиз, 3 дня на это убил.