JSFiddle - React, Tailwind, and code Playground
HTML
<div class="moreVideos">
<span class="mb">
<a class="ml" href="#">
<img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
</a
</span>
<span class="mb">
<a class="ml" href="#">
<img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
</a>
</span>
<span class="mb">
<a class="ml" href="#">
<img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
</a
</span>
<span class="mb">
<a class="ml" href="#">
<img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
</a>
</span>
JavaScript
$(document).ready(function(){
$('a.ml').click(function(){
loadAndPlayVideo( $(this).find('img').attr('id').replace(/thumb_/,'') );
return false;
})
var timer,
count = 0,
cycle = function(el){
var s = el.attr('src'),
root = s.substring( 0, s.lastIndexOf('/') + 1 );
count = (count+1)%4;
el.attr('src', root + ((count==0) ? 'default' : count) + '.jpg');
};
$('.mb img').hover(function(){
var $this = $(this);
cycle($this);
timer = setInterval(function(){ cycle($this); }, 1000);
}, function(){
clearInterval(timer);
});
})