Загрузка iframe по клику в кнопке
Добрый день, Возникла потребность подгрузки 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, изменить её местоположение, да в целом что душа пожелает...
|
Гробовщик,
Пробовал перед написанием на форум. Но или фрейм под кнопку встаёт или фаерфокс игнорит((( |
<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>
|
ну зачем так сложно??? Поставь на кнопке onclick="rolik()" и в теге head поставь скрипт
<style>
#id_rolika {
display: none;
}
</style>
<script>
function rokik() {
document.getElementById("id_rolika").style.display="block";
}
<script>
|
VlAdZiO,
Типично фреймы изымают со страницы где куча роликов, чтобы они не загружались( хотя зависимости от хоста видео, есть хосты со спец атрибутами, где грузится изначально лишь фрейм с минимальной картинкой), хотя если фреймов на странице полсотни, даж с элементарной картинкой рендинг страницы может быть минуты |
| Часовой пояс GMT +3, время: 17:43. |