Question

我尝试点击一个div中的缩略图图像，将另一个div（嵌入iframe）中的嵌入式YouTube视频播放为全尺寸视频。我已经走得那么远了，但是当页面加载时我不需要显示YT播放器，而是需要静态图像来替换它。我对jquery很新，但是已经在这里创建了一些其他答案的代码，所以我有点卡在如何与其余部分一起做替换图像。任何帮助都会很棒。

是否有任何机会在图像地图而不是div上工作？

<title>JS Bin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">    
<div class="video_case">
   <iframe src="http://www.youtube.com/embed/oHg5SJYRHA0" width="560" height="315" allowfullscreen="" frameborder="0"></iframe>
</div>
<div class="video_wrapper">
   <ul>
      <li class="video_thumbnail">
          <a href="http://www.youtube.com/embed/oHg5SJYRHA0?autoplay=1&amp;controls=0" title="" class="video-1"><img src="/ProductImages_Display/PREVIEW/2/5172_31188_10523.jpg" border="0" width="180" height="268" style="border: 0;" /></a>
      </li>
   </ul>
</div>
<p>
  <script type="text/javascript">
  // <![CDATA[
    $(function() {
      $(".video-1").on("click", function(event) {
        event.preventDefault();
        $(".video_case iframe").prop("src", $(event.currentTarget).attr("href"));
      });    
    });
  // ]]>
  </script>
</p>

jQuery视频点击图片到动作视频播放（在YT播放器上有占位符）

0 个答案: