点击播放YOUTUBE视频并隐藏div

Question

不是我在这里的第一篇文章，但丢失了登录凭据，所以重新开始。

我需要实现的是将一些原始 Javascript 与 JQuery 结合起来。我有一个 YouTube 视频 (iframe)，我的客户希望它覆盖一个带有 HTML 内容的 div，然后单击覆盖的 div 中的图像播放视频并隐藏覆盖的 div。

这是我目前所拥有的。

<iframe src="//www.youtube.com/embed/6TgyvSQlJtI?wmode=transparent&enablejsapi=1&rel=0&autohide=1" frameborder="0" allowfullscreen id="video"></iframe>

$( document ).ready(function() {
$('#education-graphic').click(function() {
    $('#video-content-overlay').fadeOut('fast');
}); 
$('#video-back').click(function() {
    $('#video-content-overlay').fadeIn('fast');
}); 
});


var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("education-graphic");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("video-back");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

问题出在 ipad 上，其中两个点击事件附加到同一个元素，所以我需要一些方法来隐藏和显示带有原始 js 的 div 或使用 jquery 播放和暂停视频。

是的，我知道 JQuery 是 JS，但我无法让它工作。

在此之前为您提供任何帮助。

Answer 1

以下应该有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<style>
   .oVideo {
      width: 300px;
      height: 150px;
      background-color: #f00;
   }
</style>

<div class="oVideo">
</div>

<script>
   $(document).ready(function () {
      $('.oVideo').click(function () {
         var video = '<iframe src="http://www.youtube.com/embed/6TgyvSQlJtI?wmode=transparent&enablejsapi=1&rel=0&autohide=1&autoplay=1" frameborder="0" allowfullscreen id="video"></iframe>';
         $('.oVideo').html(video);
      });
   });
</script>

您只需将背景颜色替换为您的图片即可。

如果您使用 CSS 将 '.oVideo' 的光标设置为 'pointer'，则可以对此进行优化。