Video play on hover <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="http://jsfiddle.net/meh1aL74/" rel="nofollow">http://jsfiddle.net/meh1aL74/</a></p> <p>Preview of the html here - </p> <pre><code>&lt;div class="video"&gt; &lt;div class="videoListCopy"&gt; &lt;a href="videodetail.html" class="buttonMore"&gt; &lt;div class="breaker"&gt;&lt;div class="line"&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="buttonContent"&gt; &lt;div class="linkArrowContainer"&gt; &lt;div class="iconArrowRight"&gt;&lt;/div&gt; &lt;div class="iconArrowRightTwo"&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="videoSlate"&gt; &lt;video class="thevideo" loop&gt; &lt;source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"&gt; Your browser does not support the video tag. &lt;/video&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="video"&gt; &lt;div class="videoListCopy"&gt; &lt;a href="videodetail.html" class="buttonMore"&gt; &lt;div class="breaker"&gt;&lt;div class="line"&gt;&lt;/div&gt;&lt;/div&gt; &lt;div class="buttonContent"&gt; &lt;div class="linkArrowContainer"&gt; &lt;div class="iconArrowRight"&gt;&lt;/div&gt; &lt;div class="iconArrowRightTwo"&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="videoSlate"&gt; &lt;video class="thevideo" loop&gt; &lt;source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg"&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 = $(".video"); var vid = $("video"); [].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> <p>Oliver</p>