title: Video play on hover
body: <p>I have a selection of video thumbnails that I want to trigger to play/pause on hover. I have managed to get one of them to work, but I run into a problem with the others on the list. Attached is the fiddle of my code. There will be a div covering each html5 video so the hover needs to delegate to the video, which I'm unsure as to how to do.</p>
  <p><a href="https://jsfiddle.net/meh1aL74/" rel="nofollow noreferrer">https://jsfiddle.net/meh1aL74/</a></p>
  <p>Preview of the html here -</p>
  <pre><code>&lt;div class=&quot;video&quot;&gt;
              &lt;div class=&quot;videoListCopy&quot;&gt;
                  &lt;a href=&quot;videodetail.html&quot; class=&quot;buttonMore&quot;&gt;
                          &lt;div class=&quot;breaker&quot;&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;/div&gt;
                          &lt;div class=&quot;buttonContent&quot;&gt;
                              &lt;div class=&quot;linkArrowContainer&quot;&gt;
                                  &lt;div class=&quot;iconArrowRight&quot;&gt;&lt;/div&gt;
                                  &lt;div class=&quot;iconArrowRightTwo&quot;&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;span&gt;Others&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;videoSlate&quot;&gt;
                  &lt;video class=&quot;thevideo&quot; loop&gt;
                    &lt;source src=&quot;http://www.w3schools.com/html/movie.ogg&quot; type=&quot;video/ogg&quot;&gt;
                  Your browser does not support the video tag.
                  &lt;/video&gt;
              &lt;/div&gt;
          &lt;/div&gt;
           
           
            &lt;div class=&quot;video&quot;&gt;
              &lt;div class=&quot;videoListCopy&quot;&gt;
                  &lt;a href=&quot;videodetail.html&quot; class=&quot;buttonMore&quot;&gt;
                          &lt;div class=&quot;breaker&quot;&gt;&lt;div class=&quot;line&quot;&gt;&lt;/div&gt;&lt;/div&gt;
                          &lt;div class=&quot;buttonContent&quot;&gt;
                              &lt;div class=&quot;linkArrowContainer&quot;&gt;
                                  &lt;div class=&quot;iconArrowRight&quot;&gt;&lt;/div&gt;
                                  &lt;div class=&quot;iconArrowRightTwo&quot;&gt;&lt;/div&gt;
                              &lt;/div&gt;
                              &lt;span&gt;Others&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;videoSlate&quot;&gt;
                  &lt;video class=&quot;thevideo&quot; loop&gt;
                    &lt;source src=&quot;http://www.w3schools.com/html/movie.ogg&quot; type=&quot;video/ogg&quot;&gt;
                  Your browser does not support the video tag.
                  &lt;/video&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Preview of the JavaScript here -</p>
  <pre><code>    var figure = $(&quot;.video&quot;);
      var vid = $(&quot;video&quot;);
  
      [].forEach.call(figure, function (item) {
              item.addEventListener('mouseover', hoverVideo, false);
              item.addEventListener('mouseout', hideVideo, false);
      });
      
      function hoverVideo(e) {  
              $('.thevideo')[0].play(); 
      }
  
      function hideVideo(e) {
              $('.thevideo')[0].pause(); 
      }
  </code></pre>
  <p>Thank you very much for your help.</p>