Javascript/jQuery - 用占位符图像替换视频 iframe

Question

我有一个关于这段代码的问题，这里非常乐于助人的人回答了这个问题，但现在我有另一个稍微不同的问题。我有一个位于轮播幻灯片中的占位符图像，当点击它时，它会被使用默认 youtube iframe 嵌入的 youtube 视频替换。

我想做的是，在用户点击图片并播放视频后，当他们点击远离嵌入视频的轮播幻灯片时（例如，通过点击轮播箭头或分页点）它会将其重置为视频显示之前的状态。

我希望这是有道理的。基本上，我需要帮助对这段代码进行逆向工程，以便在单击另一个元素/div 时，视频再次被占位符图像替换。

这是 HTML：

<div class="youtube_video">
<img src="img/video_poster_carousel.jpg" width="986" height="308">
<!-- <iframe width="986" height="555" src="https://www.youtube.com/embed/Wt_Ruy_ejPY?enablejsapi=1&list=PL027E2B6D9900A88F&showinfo=0&controls=1" frameborder="0" allowfullscreen></iframe> -->
</div>

还有 CSS：

/* video */
.youtube_video { position: relative; padding-bottom: 31.65%; height:0;  }
.youtube_video img { position: absolute; display: block; top: 0; left: 0; /*width: 100%; height: 100%;*/ z-index: 20; cursor: pointer; }
.youtube_video:after { content: ""; position: absolute; display: block; 
    background: url(play-button.png) no-repeat 0 0; 
    top: 45%; left: 45%; width: 46px; height: 36px; z-index: 30; cursor: pointer; } 
.youtube_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }

/* image poster clicked, player class added using js */
.youtube_video.player img { display: none; }
.youtube_video.player:after { display: none; }

还有 Javascript：

  $(function() { 
    var videos  = $(".youtube_video");

        videos.on("click", function(){
            var elm = $(this),
                conts   = elm.contents(),
                le      = conts.length,
                ifr     = null;

            for(var i = 0; i<le; i++){
              if(conts[i].nodeType == 8) ifr = conts[i].textContent;
            }

            elm.addClass("player").html(ifr);
            elm.off("click");
        });
  });

Answer 1

下面这行实际上做了一个innerHTML，这意味着你的img标签丢失了 您可能必须将 IMG 标记移出 youtube_video 容器并为 youtube_video 容器和 IMG 标记执行隐藏和显示切换机制

elm.addClass("player").html(ifr);