title: jQuery events not triggering on initial page load
body: <p>The following php is outputting various videos on my page with the class name ".videos":</p>
  
  <pre><code>&lt;?php
  wp_video_shortcode($attr, $content);    
  ?&gt;
  </code></pre>
  
  <p>The generated code for each video looks like this:</p>
  
  <pre><code>&lt;video class="videos" poster="/poster.png" preload="none" controls="controls"&gt;
    &lt;source type="video/mp4" src="/VideoPreview_04.mp4?_=1"&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>The following jquery is to remove the video controls and make each one play on mouseover and pause on mouseout:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
    jQuery(document).ready(function() {
      jQuery(".videos").removeAttr("controls");
  
      jQuery(".videos").on("mouseover", function(event) {
        this.play();
      }).on('mouseout', function(event) {
        this.pause();
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>THE PROBLEM:</p>
  
  <p>It all works as it should, EXCEPT, when the page first loads, the mouseover events aren't recognised unless and until you click somewhere on the page first.</p>
  
  <p>I'm sure this has to do with delegation or something like it.
  The following for example works when the page is loaded, without clicking somewhere on the page first:</p>
  
  <pre><code>jQuery(document).on('focus mouseover', '.videos',  function(e){
    alert("focused on " + jQuery(e.target).attr('id'));
  });
  </code></pre>
  
  <p>However, when binding the video to above code, the videos don't react unless again, you click on the page somewhere first.</p>
  
  <p>I've also tried document.focus(); and other ways to give focus on various elements but cannot get it to work.</p>
  
  <p>Help, I'm running out of hair to pull out :(</p>