/* 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();