I'm working on project where I'm embedding vimeo videos FULLSCREEN using code :
<iframe id="iframe" src="http://player.vimeo.com/video/...../.." width="100%" height="100%" frameborder="0"></iframe>
I'm using Mousemove function on parent page to show company logo on Mousemove like this :
$(document).ready(function() {
var $top = $('#logo');
var $document = $(document);
var timer = null;
var timerIsRunning = false;
$top.hide();
$document.mousemove(function(e){
e.stopPropagation();开发者_JAVA百科
});
setTimeout(function() {
$document.mousemove(function(e) {
if($top.is(':hidden')) {
$top.fadeIn(2000);
} else {
if(!timerIsRunning) {
timerIsRunning = true;
clearTimeout(timer);
timer = setTimeout(function() { $top.fadeOut(); }, 15000);
setTimeout(function() {timerIsRunning = true;}, 15000);
}
}
});
}, 2000);
});
My issue is browser doesn't detect Mousemove function over embedded fullscreen video & that is why Logo div doesn't appear...
Using CSS pointer-events: none;
It works but disabled Video Player Control.
Is there any Solution ?
Thanks
Try attaching the mousemove event in the iframe :
$(document).ready(function() {
var $top = $('#logo');
var $document = $(document);
var timer = null;
var timerIsRunning = false;
$top.hide();
$document.mousemove(function(e){
e.stopPropagation();
});
setTimeout(function() {
$('#iframe',$document).mousemove(function(e) {
if($top.is(':hidden')) {
$top.fadeIn(2000);
} else {
if(!timerIsRunning) {
timerIsRunning = true;
clearTimeout(timer);
timer = setTimeout(function() { $top.fadeOut(); }, 15000);
setTimeout(function() {timerIsRunning = true;}, 15000);
}
}
});
}, 2000);
});
精彩评论