4

我对 js/jquery 很陌生，需要更多知识渊博的人的帮助！

我在这个网站和网络上都看得很清楚，但我自己找不到答案。我自己玩过，但以我有限的知识，我无法弄清楚下一步该做什么。

我有什么

我有一个img点击后被iframe（youtube 视频）替换，很像占位符/海报，并且与以下代码完美配合，我最初在这里找到：如何为 YouTube 视频添加启动画面/占位符图像：

<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

任何帮助将不胜感激！

戴尔

4

2 回答 2

5

这将做所有你想要的，包括关闭按钮：这是工作小提琴：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>
于 2013-05-04T21:04:29.387 回答
0 
$("#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'>");
});
于 2013-05-04T20:31:22.233 回答