2014-09-24 1 views
-1

У меня есть изображение, которое находится внутри div. Изображение представляет собой кнопку воспроизведения. В верхней части изображения я разместил iframe, который невидим. Когда я нажимаю изображение Я хочу IFrame появиться и начать игратьIframe, который работает с кнопкой Div

нормально я думаю, я нашел код, который должен сделать то же самое, но я не могу заставить его работать

<img src="http://www.plaisio.gr/Images/Promo/20140808-Promo-Turbo-X-Pi/turbox-pi_promo_v01_03.jpg" alt="" style="display:block;" name="video" id="video" height="272" width="495"> <iframe id="promo_video" src="" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="display:none;position:absolute;top:175px;left:344px;" frameborder="0" height="272" width="495"></iframe> 




    <script type="text/javascript"> 
$('img#video').click(function(){ 
$(this).parent().parent().find('#promo_video').attr('src','http://player.vimeo.com/video/102923007?autoplay=true'); 
$(this).parent().parent().find('#promo_video').fadeIn('slow'); 
}) 
</script> 

, но его не работающий .... любая помощь ?? я нашел simmilar рабочего примера здесь http://www.plaisio.gr/Campaign/20140808-Turbo-x-Smartphone-P.htm

+2

что опечатка или же вы забыли кавычки '' visible' и display'? т.е. '=" visible ";' или являются ли они действительными переменными? Также, если они предназначены для фактических значений, 'display' не является допустимым значением для' style.display', _block, inline-block, inline, hidden_ ​​и т. Д., Хотя –

ответ

1

В вашем HTML вам не нужна кнопка, просто добавьте onclick="myFunction();" к вашему <img>

В вашем CSS вы должны иметь только display:none, не visibility: hidden

В вас JavaScript document.getElementsByClassName("video") возвращает массив. Попробуйте это:

function myFunction() { 
    var x = document.getElementsByClassName("video")[0]; 
    x.style.display = "block"; 
} 

Проверьте это здесь: jsFiddle

+0

thx для быстрого ответа, это помогает мне понять –

Смежные вопросы