/* Follow picture Plyr Player */
function _pit_plyr_icon_follow_mouse() {
$(document).on('mouseenter', '.plyr', function(ev) {
/** Variables */
var $plyr = $(ev.currentTarget),
$recouvrement = $plyr.find('.recouvrement-video'),
$icon = $recouvrement.find('.icon-lecture'),
$iconImg = $icon.find('img');
if (!$icon.length)
return;
/** Set default style for the icon img */
$iconImg.css({
transform: 'translate(-50%, -50%)',
transformOrigin: 'center center',
});
$recouvrement.css({
cursor: 'none',
});
$icon.css({
position: 'relative',
});
})
$(document).on('mouseleave', '.plyr', function(ev) {
/** Variables */
var $plyr = $(ev.currentTarget),
$recouvrement = $plyr.find('.recouvrement-video'),
$icon = $recouvrement.find('.icon-lecture'),
$iconImg = $icon.find('img');
if (!$icon.length)
return;
$recouvrement.css({
cursor: 'default',
});
$icon.css({
position: 'absolute',
});
})
$(document).on('mousemove', '.plyr', function(ev) {
/** Variables */
var $plyr = $(ev.currentTarget),
$recouvrement = $plyr.find('.recouvrement-video'),
$icon = $recouvrement.find('.icon-lecture'),
$iconImg = $icon.find('img'),
iconDelayMs = 100;
if (!$icon.length)
return;
/** SetTimeout used to have a little delay effect */
setTimeout(() => {
/** Change the position properties of the icon element */
$icon.offset({
left: ev.pageX,
top: ev.pageY,
});
}, iconDelayMs);
});
}
/** Init */
_pit_plyr_icon_follow_mouse();
