title: want youtube video to play on hover but also not show suggested videos on pause
body: <p>This problem seems to be you get one, but not the other. If I use the Youtube Player API, I can play videos on mouseon/mouseout with no problem. BUT, if you click the video to pause it, the suggested videos overlay appears. I can't figure out how to get rid of this overlay under these conditions. I can set <code>rel: 0</code> in the code to prevent the overlay at the end, but not on click-pause.</p>
  
  <p>However, let's say I give up on the API and just use iframe code to embed the video. Now I can get rid of the overlay on click-pause, but I can't get the video to play/pause on mouseon/mouseout.</p>
  
  <p>Am I doomed to make a choice? Or can I have my cake and eat it, too? The other questions I see on stackoverflow address one of these problems, but not both together.</p>
  
  <p>Here's my API code:</p>
  
  <pre><code>&lt;div id="playerPhipps" class="playerLocation"&gt;&lt;/div&gt;
  
  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;
  
              }
          });
  </code></pre>
  
  <p>Here's my code if I embed the Youtube video directly into the page:</p>
  
  <pre><code>&lt;iframe class="playerLocation" src="https://www.youtube.com/embed/iDf_QZBZBnw?rel=0&amp;amp;showinfo=0?ecver=2&amp;modestbranding=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Now everything works great, but how to play/pause on hover?</p>
  
  <p>Edit: I looked at this code on the YouTube Player API page, but it doesn't seem to do anything:</p>
  
  <p><a href="https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors" rel="nofollow noreferrer">https://developers.google.com/youtube/iframe_api_reference#Example_Video_Player_Constructors</a></p>