Question

我有一个div内的图像。图像是播放按钮。在图像的顶部，我放置了一个看不见的iframe。当我点击图片时，我希望iframe出现并开始播放

好吧我觉得我发现了一个应该做同样事情的代码，但我不能让它工作

<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>

但它不起作用......任何帮助？我在这里找到了一个类似的工作示例http://www.plaisio.gr/Campaign/20140808-Turbo-x-Smartphone-P.htm

Answer 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

与Div Button一起使用的iframe

1 个答案: