Загрузка iframe по клику в кнопке

[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 дня на это убил.

[Гробовщик]

А зачем собственно грузить фрейм в кнопку, почему бы его не загружать в <div> а кнопка будет поверх дива. После нажатия её можно скрыть, изменить ей z-index, изменить её местоположение, да в целом что душа пожелает...

[Ilya_Ru]

Гробовщик,
Пробовал перед написанием на форум. Но или фрейм под кнопку встаёт или фаерфокс игнорит(((

[Deff]

<div id=fr data='<iframe width="640" height="360" src="https://www.youtube.com/embed/EOIY3N9d8Ww?feature=player_embedded" frameborder="0" allowfullscreen></iframe>'>Смотреть ролик ?<br><br></div><button type="button" onclick="PlayTo(this)">Go</button>
<script>
function PlayTo(sel){
  var div = sel.previousSibling;
  div.innerHTML=div.getAttribute('data');
  sel.style.display = "none";
}
</script>

[VlAdZiO]

ну зачем так сложно??? Поставь на кнопке onclick="rolik()" и в теге head поставь скрипт

<style>
#id_rolika {
display: none;
}
</style>
<script>
function rokik() {
document.getElementById("id_rolika").style.display="block";
}
<script>

[Deff]

VlAdZiO,
Типично фреймы изымают со страницы где куча роликов, чтобы они не загружались( хотя зависимости от хоста видео, есть хосты со спец атрибутами, где грузится изначально лишь фрейм с минимальной картинкой), хотя если фреймов на странице полсотни, даж с элементарной картинкой рендинг страницы может быть минуты