jquery – 开始/播放嵌入(iframe)youtube-video点击图像

我想通过点击图片开始播放嵌入式YouTube视频。想法是在视频顶部有一个图像，当图像被点击时，它淡出并开始播放视频。

我使用jquery褪色的图像，并希望找到一种方法来播放或点击视频使用jquery以及。

褪色工作正常，但我不知道如何触发视频播放。
我通过将视频设置为自动播放和隐藏，然后在图片被点击时淡入视频，让它在几个浏览器上工作。在大多数浏览器上，视频会在淡入时自动播放，但在chrome中，即使被隐藏，它也会自动播放。它不能很好地在iOS中。

因为我是新的在这，我不确定如果我写100％正确，但我已经尝试这样没有成功：

$('#IMAGE').click(function() { $('#VIDEO').play(); });

那么，我将如何使视频在图片点击播放？
有没有方法来播放视频时的图像被点击，只是使用jquery？

先谢谢你。

解决方法

快速和肮脏的方式是简单地换出iframe与autoplay = 1设置使用jQuery。

HTML

占位符：

<div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

自动播放链接：

<a class="introVid" href="#video">Watch the video</a></p>

JQUERY

调用函数的onClick捕获器

jQuery('a.introVid').click(function(){
  autoplayVideo('VIDEO_ID_HERE','450','283');
});

功能

/*--------------------------------
  Swap video with autoplay video
---------------------------------*/

function autoplayVideo(vcode,width,height){
  "use strict";
  $("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}