0

我正在尝试单击一个 div 中的缩略图以将另一个 div 中的嵌入 youtube 视频（嵌入为 iframe）作为全尺寸视频播放。我已经做到了这一点，但是我需要一个静态图像来替换它，而不是显示页面加载时的 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>
4

0 回答 0