Jquery 希望youtube视频在悬停时播放，但也不要在暂停时显示建议的视频

这个问题似乎是你得到了一个，而不是另一个。如果我使用Youtube播放器API，我可以在mouseon/mouseout上毫无问题地播放视频。但是，如果单击视频暂停，则会显示建议的视频覆盖。在这种情况下，我想不出如何去掉这个覆盖层。我可以在代码中设置

rel:0

，以防止在末尾覆盖，但不能单击“暂停”

但是，假设我放弃了API，只使用iframe代码嵌入视频。现在，我可以在单击“暂停”时取消覆盖，但我无法在mouseon/mouseout上播放/暂停视频

我注定要做出选择吗？或者我也可以吃我的蛋糕吗？我在stackoverflow上看到的其他问题解决了其中一个问题，但不是同时解决这两个问题

以下是我的API代码：

<div id="playerPhipps" class="playerLocation"></div>

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player1;

      function onYouTubeIframeAPIReady() {
        player1 = new YT.Player('playerPhipps', {
          videoId: 'iDf_QZBZBnw',
          events: {
            //'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
          },
          playerVars: {
              'controls':'1',
              'showinfo':'0',
              'playlist': 'iDf_QZBZBnw',
              'loop':'1',
              'modestbranding':'1',
              'autohide':'1',
              'rel': '0',
              'ytp-pause-overlay': '0', //doesn't work
              'ecver': '2' //doesn't work
          }
        });

//Hover play - works great!
        $('.playerLocation').on('mouseover',function(){
            var thisPlayer = $(this).attr('id');
            switch(thisPlayer) {
                case 'playerPhipps':
                    player1.playVideo();
                    break;

            }
            //player.playVideo();

        });

        $('.playerLocation').on('mouseout',function(){
            //player.stopVideo();
            var thisPlayer = $(this).attr('id');
            switch(thisPlayer) {
                case 'playerPhipps':
                    player1.stopVideo();
                    break;

            }
        });

var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var-player1；
函数onyoutubeiframeapiredy（）{
player1=新的YT.Player（'playerHipps'{
videoId:“iDf_QZBZBnw”，
活动：{
//“onReady”：onPlayerReady，
//“onStateChange”：onPlayerStateChange
},
playerVars：{
“控件”：“1”，
“showinfo”：“0”，
“播放列表”：“iDf_QZBZBnw”，
“循环”：“1”，
“品牌化”：“1”，
“自动隐藏”：“1”，
“rel”：“0”，
“ytp暂停覆盖”：“0”，//不起作用
'ecver'：'2'//不起作用
}
});
//悬停游戏-作品伟大！
$（'.playerLocation'）.on（'mouseover'，function（）{
var thisPlayer=$（this.attr（'id'）；
开关（该播放器）{
案例“playerphips”：
player1.playVideo（）；
打破
}
//player.playVideo（）；
});
$（'.playerLocation'）.on（'mouseout'，function（））{
//player.stopVideo（）；
var thisPlayer=$（this.attr（'id'）；
开关（该播放器）{
案例“playerphips”：
player1.stopVideo（）；
打破
}
});

如果我将Youtube视频直接嵌入页面，下面是我的代码：

<iframe class="playerLocation" src="https://www.youtube.com/embed/iDf_QZBZBnw?rel=0&amp;showinfo=0?ecver=2&modestbranding=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

现在一切都很好，但如何播放/暂停悬停

编辑：我在YouTube播放器API页面上查看了此代码，但它似乎没有任何作用：

---

好的，这就是你必须做的

放入一个iframe

<iframe id="playerLibrary" class="playerLocation" width="560" height="315" src="https://www.youtube.com/embed/YT2ZOD32lWw?rel=0&amp;showinfo=0&enablejsapi=1" playsinline enablejsapi="1" frameborder="0" allowfullscreen></iframe>

---

“如何在悬停时播放/暂停？”你想让它在鼠标悬停时播放，在鼠标离开时暂停吗？你想让它在鼠标再次移动时继续播放吗？你想播放/循环视频的次数有限制吗？@NewToJS：我想让它在鼠标上播放，在鼠标离开时暂停。不管它是继续播放还是开始播放。如果播放，我想让它循环。

 var player3;
 $( document ).ready(function() {
            //whatever you want here
 });
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


 function onYouTubeIframeAPIReady() {
        player3 = new YT.Player('playerLibrary', {
        events: {
            'onReady': onPlayerReady,
            //'onStateChange': onPlayerStateChange
        },
        playerVars: {

        }
        });
   }
   function onPlayerReady(event) {
           $('.playerLocation').on('mouseover',function(){
                player3.playVideo();
            });

            $('.playerLocation').on('mouseout',function(){
                player3.stopVideo();
            });
   }