单击按钮将 img 替换为 iframe

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，但我不知道要在脚本中添加什么来实现这一点。

我在寻找什么

我正在寻找播放按钮作为点击时的“触发器”，或者理想情况下将 both 播放按钮和 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'>");
});