javascript - 点击overlay div播放youtube视频

标签 javascript jquery youtube embed

我有一个覆盖 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> 

谢谢!

最佳答案

为了加快速度,我建议您使用此功能。您需要一个带有视频源网址的按钮/链接。在 url 上,您需要传递参数“autoplay=1”。当您单击该元素时,将视频源放在您的 iframe 的属性“src”上;)Le 代码:

<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>

关于javascript - 点击overlay div播放youtube视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17129455/

相关文章:

youtube - 嵌入式YouTube视频无法与?autoplay = 1一起播放

php - jquery 选择列表和 $_POST 帮助

javascript - JSON 解析怪异 - 损坏还是速度慢?

javascript - 如何在单击按钮时呈现外部模板?

javascript - Jquery 点击时关闭 div

javascript - 更改基于对象结构的条件

javascript - React Component 在使用 React router 4 时不呈现

javascript - form.submit() 在 firefox 中不工作

javascript - 从YouTube channel 中获取最新视频

android - 如何在WebView中打开youtube视频?