Slider Revolution WP
09.27.2016
Replace the first line’s class name with your grid element’s “play button” class. The custom CSS will then hide this button on desktop devices, and show it normally on mobile devices.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Change "video-hover-element-18" part in the first line below to the class name assigned to your skin's "play button". https://tinyurl.com/jkstmxl */ .video-hovers .eg-video-hovers-element-18, .video-hovers .esg-overlay {display: none !important; pointer-events: none} .video-hovers .esg-entry-cover {visibility: visible !important; opacity: 1 !important; pointer-events: none} .video-hovers .esg-entry-cover * {pointer-events: auto} .video-hovers .esg-media-poster {opacity: 1 !important} .video-hovers .is-over video {display: block !important} .video-hovers .esg-loader {display: block !important; visibility: visible !important; opacity: 1 !important} |
Adjust the “User Settings” toward the top to enable/disable options such as looping and user-controls. And also choose to always play the video from the start on mouse hover with the “rewindOnHover” option.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
(function($) { /* ******************* */ /* BEGIN USER SETTINGS */ /* ******************* */ var loopVideo = true; var videoControls = false; var rewindOnHover = true; var preloadVideos = true; /* ***************** */ /* END USER SETTINGS */ /* ***************** */ // no need to edit below if('ontouchend' in document) return; var grid = $('.esg-grid').addClass('video-hovers'), spinner, videos, timer = setInterval(function() { if(grid.is(':visible')) { clearInterval(timer); videos = grid.find('video').each(function() { var $this = $(this), img = $this.closest('.tp-esg-item').find('.esg-media-poster'); if(img.length) { img = img.css('background-image'); $this.attr('poster', img.slice(4, -1).replace(/"/g, "")); } }); if(preloadVideos) videos.attr('preload', 'auto'); if(!videoControls) videos.removeAttr('controls'); if(loopVideo) videos.attr('loop', 'loop'); spinner = grid.closest('.myportfolio-container').find('.esg-loader'); spinner = spinner.length ? spinner.eq(0).clone() : false; addHooks(); videos = null; } }, 250); function addHooks() { grid.on('mouseenter', '.tp-esg-item', function() { var $this = $(this); if($this.hasClass('is-over')) return; var vid = $this.find('video'); if(!vid.length) return; clearTimeout($this.data('hover-timer')); $this.addClass('is-over'); if(spinner) spinner.appendTo($this); if(!vid.hasClass('isplaying')) { if(!videoControls) vid.removeAttr('controls'); if(rewindOnHover) vid[0].currentTime = 0; if(spinner) vid.off('play', toggleSpinner).one('play', toggleSpinner); $this.find('.esg-click-to-play-video').click(); $this.data('hover-timer', setTimeout(function() { if(!$this.hasClass('is-over')) $this.trigger('mouseleave'); }, 250)); } }).on('mouseleave', '.tp-esg-item', function() { var $this = $(this), vid = $this.find('video'); if(vid.length) { $this.removeClass('is-over'); vid.off('play', toggleSpinner); vid[0].pause(); if(spinner) spinner.remove(); } }); } function toggleSpinner() { spinner.remove(); } })(jQuery); |