Question

我对js / jquery很新，需要一些知识渊博的人的帮助！

我在这个网站和网络上看得很清楚，但我自己找不到答案。我自己玩过，但由于我的知识有限，我无法弄清楚接下来要做什么。

我得到了什么

我有一个img点击后被iframe（YouTube视频）取代，就像占位符/海报一样，与下面的代码完美配合，我最初在这里找到： How to add a splash screen/placeholder image for a YouTube video：

<div class="playbutton"></div>    
<img src="image.jpg" data-video="http://www.youtube.com/videolink">
        <script>
                $('img').click(function(){
            var video = '<div class="video-container"><iframe src="'+ $(this).attr('data-video') +'"></iframe></div>';
            $(this).replaceWith(video);
        });
        </script>

正如我所说 - 当点击图像时它完全有效，被视频取代。

问题

我现在添加了一个播放按钮（当前为div，但我可以使用img代替）浮动在img上方。如果我点击播放按钮没有任何反应（显然这与脚本无关）。

我希望这个播放按钮能够“触发”用img替换iframe，但我不知道要添加到我的脚本中以实现此目的。

我在寻找什么

我正在寻找播放按钮作为点击时的“触发器”或理想情况下两者播放按钮和img作为“触发器”，以便它可以正常工作用户也可以点击图像，而不仅仅是播放按钮。

虽然我有你......

如果在混音中添加关闭按钮并点击，我是否还可以再次使用iframe替换img？

任何帮助将不胜感激！

戴尔

Answer 1

这将做你想要的所有，包括关闭按钮：这是工作小提琴： http://jsfiddle.net/ANRHT/6/

JS：

 $('.playbutton,img').click(function(){
   var video = '<div class="video-container"><iframe src="'+$('img').attr('data-video') +'"></iframe></div>';
   $('.video').hide();
   $('.tube').html(video);
   $('.close').show();
 });
 $('.close').click(function(){
   $('.video').show();
   $('.tube').empty();
   $('.close').hide();
 });

HTML：

<div class="video">
  <div class="playbutton">Play</div>    
  <img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>

Answer 2

$("#play-button").on('click', function () {
    //this fires the same click event from your code.
    $("img").trigger('click');
});
$("#close-button").on('click', function () {
    $("iframe").replaceWith("<img src='image.jpg'>");
});

单击按钮将img替换为iframe

2 个答案: