Wouldn't it be cool to have a video play and follow your mouse pointer when you hover over the red box? And then once you move away, the video stops and disappears. Check out my progress so far: jsfiddle
Here's the jQuery code I've used:
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.pageX + 20,
top: e.pageY
});
});
var figure = $(".video").hover( hoverVideo, hideVideo );
function hoverVideo(e) {
$('video', this).get(0).play();
}
function hideVideo(e) {
$('video', this).get(0).pause();
}
$( "#red" ).mouseover(function() {
$("#videosList").css("display","block");
});
And here is the HTML structure:
<div id="tail">
<div id="videosList">
<div class="video">
<video class="thevideo" loop preload="none">
<source src="http://giant.gfycat.com/VerifiableTerrificHind.mp4" type="video/mp4">
<source src="http://giant.gfycat.com/VerifiableTerrificHind.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
Hover mouse over video. Desktop only [ Obviously! ;) ]
</div>
</div>
<div id="red" style="height:200px;width:200px;background:red;">
</div>