Question

我有一个覆盖youtube iframe的占位符div。我正在尝试点击占位符并使用jquery播放视频。这似乎很简单，但我不能为我的生活弄清楚这一点。有人可以帮我这个吗？

这是我正在使用的HTML：

<div class="container">
   <span class="placeholder"></span>
   <iframe id="video width="560" height="315" src="http://www.youtube.com/embed/abqjFFtAPRo" frameborder="0" allowfullscreen></iframe>
</div>

谢谢！

Answer 1

为了使这个快速，我建议你这个功能。您需要一个带有视频源网址的按钮/链接。在URL上，您需要传递参数“autoplay = 1”。单击元素时，将视频源放在iframe的属性“src”上;）Le code：

<html>
  <head>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#loadVideo").bind("click", function(){
          videoUrl = $(this).attr("data-video-src")
          $("#video").attr("src", videoUrl)
        });
      });
    </script>
  </head>
  <body>
    <div class="container">
      <button id="loadVideo" data-video-src="http://www.youtube.com/embed/abqjFFtAPRo?rel=0&autoplay=1">Load video</button>
      <iframe id="video" width="560" height="315" src="" frameborder="0" allowfullscreen/>
    </div> 
  </body>
</html>

Answer 2

您的id属性后，您似乎错过了双引号。

我还创建了一个CodePen（http://codepen.io/j_shb/pen/hJKaE），它显示了如何在iFrame上定位跨度，然后使用jQuery绑定click事件。（不确定为什么视频嵌入在我的示例中不起作用 - 我认为这可能是CodePen的错误。）

有没有帮助？

点击叠加div以播放YouTube视频

2 个答案: