title: Javascript/jQuery: toggle (vjs-fade-out) when userActive value changes (video.js)
body: <p>I am using <em>video.js</em> to create a player that needs to be played on multiple devices. I have an custom (return to menu) button that is placed on top right corner of the video. I need to add/remove (<code>vjs-fade-out</code>) class to it according to the user interaction (<code>mouseover</code>, <code>mouseout</code>, <code>tap</code>, <code>playe</code>, <code>pasue</code>, ...).
  I have this so far that has some bugs...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu-btn"&gt;
    &lt;a href="../index.html"&gt;
      &lt;img src="../img/back.svg" width="50"&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  
  &lt;video id="myPlayer" class="video-js vjs-sublime-skin" width="1024px" height="768px" controls autoplay preload data-setup='{"nativeControlsForTouch": false}'&gt;
    &lt;source src="../video/test.mp4" type='video/mp4' /&gt;
    &lt;track class="caption" kind="captions" src="../video/test.vtt" type="text/plain" srclang="en" label="English" default /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu-btn {
    z-index: 1000;
    position: absolute;
    top: 10px;
    left: 10px;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>videojs("myPlayer").on('mouseout', function() {
    $(".menu-btn").addClass('vjs-fade-out');
  });
  
  videojs("myPlayer").on('mouseover', function() {
    $(".menu-btn").removeClass('vjs-fade-out');
  });
  
  videojs("myPlayer").on('tap', function() {
    if (videojs("myPlayer").userActive()) {
      $(".menu-btn").removeClass('vjs-fade-out');
    } else {
      //do nothing
    }
  }, 1500);
  </code></pre>
  
  <p>and I want to change it to something like this using <code>userActive</code>: </p>
  
  <pre><code>$(document).ready(function() {
    if (videojs("myPlayer").userActive()) {
      $(".menu-btn").removeClass('vjs-fade-out');
    } else {
      $(".menu-btn").addClass('vjs-fade-out');
    }
  });
  </code></pre>