SquareRefresh: Autoplay Hover

If you need code to run on One Page only, let me know, I will test again & send you new guide. However, you can also try this.

  • One Page: Code Injection – Header = Individual Page Header Injection
  • One Page: Code Injection – Footer = Code Block in bottom of Page
  • This is same for other effects/code

#1. First, use this code to Code Injection > Header

<!-- Autoplay Square Refresh -->
<!-- Allow Lightbox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.css"/>
<!-- Allow Lightbox --
<!-- Autoplay Square Refresh -->
<!-- Autoplay Square Refresh -->
<style>
.user-items-list .list-item-content__description a[href^="https://vimeo.com/"],.user-items-list .list-item-content__description a[href^="https://www.youtube.com/"],.user-items-list .list-item-content__description a[href^="https://youtu.be/"],.video-hover-link{display:none!important}.user-items-list .list-item.has-video,.user-items-list .list-item.has-video .slide-content a,.user-items-list .list-item.has-video.has-clickthrough .media-video,.user-items-list .list-item.has-video.lightbox-allowed .media-video,.user-items-list .user-items-list-banner-slideshow .arrows-bottom-outer .arrows-bottom{pointer-events:auto}.user-items-list .list-item.has-video .list-item-media-inner[data-aspect-ratio=original] img,.user-items-list .list-item.has-video .slide-media-container img{position:relative}.user-items-list .list-item.has-video .list-item-media-inner img,.user-items-list .list-item.has-video .slide-media-container img,.user-items-list .list-item.has-video .user-items-list-carousel__media-inner img{opacity:1;-webkit-transition:.3s ease-in;-o-transition:.3s ease-in;-moz-transition:.3s ease-in;transition:.3s ease-in;visibility:visible;z-index:3}.user-items-list .list-item.has-video .slide-content{opacity:1;-webkit-transition:.3s ease-in;-o-transition:.3s ease-in;-moz-transition:.3s ease-in;transition:.3s ease-in;visibility:visible;z-index:5}.user-items-list .list-item.has-video .list-item-media-inner,.user-items-list .list-item.has-video .slide-content,.user-items-list .list-item.has-video .slide-media-container,.user-items-list .list-item.has-video .user-items-list-carousel__media-inner,.user-items-list .user-items-list-banner-slideshow .arrows-bottom-outer{pointer-events:none}.user-items-list .list-item.has-video[data-video-initialized=true]:hover .list-item-media-inner img,.user-items-list .list-item.has-video[data-video-initialized=true]:hover .slide-media-container img,.user-items-list .list-item.has-video[data-video-initialized=true]:hover .user-items-list-carousel__media-inner img{opacity:0;visibility:hidden}.user-items-list .list-item.has-video .media-video{height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.touch .user-items-list .list-item.has-video.has-clickthrough[data-video-initialized=true]:hover .list-item-media-inner img,.touch .user-items-list .list-item.has-video.has-clickthrough[data-video-initialized=true]:hover .slide-media-container img,.touch .user-items-list .list-item.has-video.has-clickthrough[data-video-initialized=true]:hover .user-items-list-carousel__media-inner img,.touch .user-items-list .list-item.has-video.lightbox-allowed[data-video-initialized=true]:hover .slide-media-container img{opacity:1;visibility:visible}.user-items-list .list-item.has-video .media-video iframe{height:var(--video-height);left:50%;pointer-events:none;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:var(--video-width)}.vbox-container{overflow-y:auto}.vbox-content{min-height:100vh;margin:0!important;padding:0}.venoframe{bottom:0;height:100%;left:0;padding:4%!important;position:absolute;right:0;top:0;width:100%}.vbox-close{-webkit-box-align:center;-webkit-align-items:center;-moz-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;font-family:initial;font-size:25px;height:26px;line-height:18px;margin:25px;padding:0;width:26px}.sk-wave .sk-rect{margin:0 2px}@media screen and (max-width:768px){.vbox-close{margin:10px}}
</style>
<!-- Autoplay Square Refresh -->

#2. Next, use this code to Code Injection > Footer

<!-- Autoplay Square Refresh -->
<!-- Allow Lightbox -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/venobox/1.9.3/venobox.min.js"></script>
<script>
  // Lightbox styles
  var autoplayLightbox = {
    closeBackground: "transparent", // Close button background color
    closeColor: "#fff", // Close button text color
    overlayColor: "rgba(0, 0, 0, 1)", // Overlay background color
    spinColor: "#fff", // Preloader color
    spinner: "double-bounce" // Preloader type - rotating-plane, double-bounce, wave, wandering-cubes, spinner-pulse, three-bounce, cube-grid
};
</script>
<script>
jQuery(document).ready(function(o){var t={bgcolor:"transparent",closeBackground:"transparent",closeColor:"#fff",frameheight:"100%",framewidth:"100%",overlayColor:"rgba(0, 0, 0, 0.8)",spinColor:"#fff",spinner:"wave"},e=t;if(window.autoplayLightbox&&"object"==typeof window.autoplayLightbox){e=function(o,e){for(var r in e)e.hasOwnProperty(r)&&(o[r]&&"object"==typeof e[r]?t(o[r],e[r]):o[r]=e[r]);return o}(t,window.autoplayLightbox)}o(".user-items-list .list-item").addClass("lightbox-allowed"),o(document).on("click",".media-video",function(t){t.preventDefault(),o(this).venobox(e).trigger("click")})});
</script>
<!-- Allow Lightbox -->
<script>
var tagVimeo=document.createElement("script"),tagYoutube=document.createElement("script");tagYoutube.src="https://www.youtube.com/iframe_api";var firstScriptYoutubeTag=document.getElementsByTagName("script")[0];if(firstScriptYoutubeTag.parentNode.insertBefore(tagYoutube,firstScriptYoutubeTag),window.Vimeo&&window.Vimeo.Player)vimeoFrame();else{tagVimeo.src="https://player.vimeo.com/api/player.js";var firstScriptVimeoTag=document.getElementsByTagName("script")[0];firstScriptVimeoTag.parentNode.insertBefore(tagVimeo,firstScriptVimeoTag),tagVimeo.addEventListener("load",function(){vimeoFrame()})}function vimeoFrame(){document.querySelectorAll(".user-items-list").forEach(function(e){e.querySelectorAll(".list-item").forEach(function(e){if(e.querySelectorAll("a").forEach(function(t){var i,o=t.getAttribute("href"),r="";if(e.classList.contains("lightbox-allowed"))i=t.getAttribute("href");else{var a=e.querySelector(".list-item-content__button");a?(e.classList.add("has-clickthrough"),i=a.getAttribute("href"),a.hasAttribute("target")&&(r='target="'+a.getAttribute("target")+'"')):i=t.getAttribute("href")}-1!==o.indexOf("vimeo")&&(t.parentNode.classList.add("video-hover-link"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").length>0&&(e.classList.add("has-video"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").forEach(function(e){e.insertAdjacentHTML("beforeEnd",'<a href="'+i+'" class="media-video media-video-vimeo" '+r+' data-vimeo="'+o+'" data-autoplay="true" data-vbtype="video"></a>')})))}),e.querySelector(".media-video-vimeo")){var t,i=e.querySelector(".media-video-vimeo"),o={autopause:!0,background:!0,byline:!1,controls:!1,loop:!0,muted:!0,title:!1,url:i.getAttribute("data-vimeo")};(t=new Vimeo.Player(i,o)).pause(),Promise.all([t.getVideoWidth(),t.getVideoHeight()]).then(t=>{const[i,o]=t;function r(e){var i,o,r=e.parentNode.getBoundingClientRect().width,a=e.parentNode.getBoundingClientRect().height,n=r/a,d=t[0]/t[1];n>d?(o=r/d,e.style.setProperty("--video-height",o+"px"),e.style.setProperty("--video-width","100%")):(i=a*d,e.style.setProperty("--video-height","100%"),e.style.setProperty("--video-width",i+"px"))}r(e.querySelector(".media-video-vimeo")),window.addEventListener("resize",function(){r(e.querySelector(".media-video-vimeo"))})}),e.addEventListener("mouseenter",function(){e.getAttribute("data-video-initialized")&&t.play()}),e.addEventListener("mouseleave",function(){e.getAttribute("data-video-initialized")&&t.pause()})}})})}window.onYouTubeIframeAPIReady=function(){document.querySelectorAll(".user-items-list").forEach(function(e){e.querySelectorAll(".list-item").forEach(function(e){if(e.querySelectorAll("a").forEach(function(t){var i,o=t.getAttribute("href"),r="";if(e.classList.contains("lightbox-allowed"))i=t.getAttribute("href");else{var a=e.querySelector(".list-item-content__button");a?(e.classList.add("has-clickthrough"),i=a.getAttribute("href"),a.hasAttribute("target")&&(r='target="'+a.getAttribute("target")+'"')):i=t.getAttribute("href")}-1===o.indexOf("youtube")&&-1===o.indexOf("youtu.be")||(t.parentNode.classList.add("video-hover-link"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").length>0&&(e.classList.add("has-video"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").forEach(function(e){e.insertAdjacentHTML("beforeEnd",'<a href="'+i+'" class="media-video media-video-youtube" '+r+' data-youtube="'+o+'" data-autoplay="true" data-vbtype="video"><div class="ytplayer"></div></a>')})))}),e.querySelector(".media-video-youtube")){var t,i=e.querySelector(".media-video-youtube"),o=i.getAttribute("data-youtube"),r=o.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/)[1],a={events:{onReady:function(){t.mute(),t.setVolume(0)}},playerVars:{cc_load_policy:0,controls:0,disablekb:1,enablejsapi:1,host:"https://www.youtube.com",html5:1,iv_load_policy:3,rel:0,modestbranding:1,origin:window.location.origin,playsinline:1,showinfo:0},videoId:r};function n(e){var t="https://www.youtube.com/oembed?url="+o,i=new XMLHttpRequest;i.onreadystatechange=function(){if(4==i.readyState&&200==i.status)try{var t,o,r=JSON.parse(i.responseText),a=[r.width,r.height],n=e.parentNode.getBoundingClientRect().width,d=e.parentNode.getBoundingClientRect().height,s=a[0]/a[1];n/d>s?(o=n/s,e.style.setProperty("--video-height",o+"px"),e.style.setProperty("--video-width","100%")):(t=d*s,e.style.setProperty("--video-height","100%"),e.style.setProperty("--video-width",t+"px"))}catch(e){return console.log("notifications JSON Parse failed!"),void console.log(e.message+" in "+i.responseText)}},i.open("GET",t),i.send()}t=new YT.Player(i.querySelector(".ytplayer"),a),n(i),window.addEventListener("resize",function(){n(i)}),e.addEventListener("mouseenter",function(){e.getAttribute("data-video-initialized")&&t.playVideo()}),e.addEventListener("mouseleave",function(){e.getAttribute("data-video-initialized")&&t.pauseVideo()})}})})},window.onload=function(){document.querySelectorAll(".list-item").forEach(function(e){e.setAttribute("data-video-initialized","true")})};
</script>

<!-- Autoplay Square Refresh -->
<!-- Autoplay Square Refresh -->
<script>
var tagVimeo=document.createElement("script"),tagYoutube=document.createElement("script");tagYoutube.src="https://www.youtube.com/iframe_api";var firstScriptYoutubeTag=document.getElementsByTagName("script")[0];if(firstScriptYoutubeTag.parentNode.insertBefore(tagYoutube,firstScriptYoutubeTag),window.Vimeo&&window.Vimeo.Player)vimeoFrame();else{tagVimeo.src="https://player.vimeo.com/api/player.js";var firstScriptVimeoTag=document.getElementsByTagName("script")[0];firstScriptVimeoTag.parentNode.insertBefore(tagVimeo,firstScriptVimeoTag),tagVimeo.addEventListener("load",function(){vimeoFrame()})}function vimeoFrame(){document.querySelectorAll(".user-items-list").forEach(function(e){e.querySelectorAll(".list-item").forEach(function(e){if(e.querySelectorAll("a").forEach(function(t){var i,o=t.getAttribute("href"),r="";if(e.classList.contains("lightbox-allowed"))i=t.getAttribute("href");else{var a=e.querySelector(".list-item-content__button");a?(e.classList.add("has-clickthrough"),i=a.getAttribute("href"),a.hasAttribute("target")&&(r='target="'+a.getAttribute("target")+'"')):i=t.getAttribute("href")}-1!==o.indexOf("vimeo")&&(t.parentNode.classList.add("video-hover-link"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").length>0&&(e.classList.add("has-video"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").forEach(function(e){e.insertAdjacentHTML("beforeEnd",'<a href="'+i+'" class="media-video media-video-vimeo" '+r+' data-vimeo="'+o+'" data-autoplay="true" data-vbtype="video"></a>')})))}),e.querySelector(".media-video-vimeo")){var t,i=e.querySelector(".media-video-vimeo"),o={autopause:!0,background:!0,byline:!1,controls:!1,loop:!0,muted:!0,title:!1,url:i.getAttribute("data-vimeo")};(t=new Vimeo.Player(i,o)).pause(),Promise.all([t.getVideoWidth(),t.getVideoHeight()]).then(t=>{const[i,o]=t;function r(e){var i,o,r=e.parentNode.getBoundingClientRect().width,a=e.parentNode.getBoundingClientRect().height,n=r/a,d=t[0]/t[1];n>d?(o=r/d,e.style.setProperty("--video-height",o+"px"),e.style.setProperty("--video-width","100%")):(i=a*d,e.style.setProperty("--video-height","100%"),e.style.setProperty("--video-width",i+"px"))}r(e.querySelector(".media-video-vimeo")),window.addEventListener("resize",function(){r(e.querySelector(".media-video-vimeo"))})}),e.addEventListener("mouseenter",function(){e.getAttribute("data-video-initialized")&&t.play()}),e.addEventListener("mouseleave",function(){e.getAttribute("data-video-initialized")&&t.pause()})}})})}window.onYouTubeIframeAPIReady=function(){document.querySelectorAll(".user-items-list").forEach(function(e){e.querySelectorAll(".list-item").forEach(function(e){if(e.querySelectorAll("a").forEach(function(t){var i,o=t.getAttribute("href"),r="";if(e.classList.contains("lightbox-allowed"))i=t.getAttribute("href");else{var a=e.querySelector(".list-item-content__button");a?(e.classList.add("has-clickthrough"),i=a.getAttribute("href"),a.hasAttribute("target")&&(r='target="'+a.getAttribute("target")+'"')):i=t.getAttribute("href")}-1===o.indexOf("youtube")&&-1===o.indexOf("youtu.be")||(t.parentNode.classList.add("video-hover-link"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").length>0&&(e.classList.add("has-video"),e.querySelectorAll(".slide-media-container, .user-items-list-carousel__media-inner, .list-item-media-inner").forEach(function(e){e.insertAdjacentHTML("beforeEnd",'<a href="'+i+'" class="media-video media-video-youtube" '+r+' data-youtube="'+o+'" data-autoplay="true" data-vbtype="video"><div class="ytplayer"></div></a>')})))}),e.querySelector(".media-video-youtube")){var t,i=e.querySelector(".media-video-youtube"),o=i.getAttribute("data-youtube"),r=o.match(/^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/)[1],a={events:{onReady:function(){t.mute(),t.setVolume(0)}},playerVars:{cc_load_policy:0,controls:0,disablekb:1,enablejsapi:1,host:"https://www.youtube.com",html5:1,iv_load_policy:3,rel:0,modestbranding:1,origin:window.location.origin,playsinline:1,showinfo:0},videoId:r};function n(e){var t="https://www.youtube.com/oembed?url="+o,i=new XMLHttpRequest;i.onreadystatechange=function(){if(4==i.readyState&&200==i.status)try{var t,o,r=JSON.parse(i.responseText),a=[r.width,r.height],n=e.parentNode.getBoundingClientRect().width,d=e.parentNode.getBoundingClientRect().height,s=a[0]/a[1];n/d>s?(o=n/s,e.style.setProperty("--video-height",o+"px"),e.style.setProperty("--video-width","100%")):(t=d*s,e.style.setProperty("--video-height","100%"),e.style.setProperty("--video-width",t+"px"))}catch(e){return console.log("notifications JSON Parse failed!"),void console.log(e.message+" in "+i.responseText)}},i.open("GET",t),i.send()}t=new YT.Player(i.querySelector(".ytplayer"),a),n(i),window.addEventListener("resize",function(){n(i)}),e.addEventListener("mouseenter",function(){e.getAttribute("data-video-initialized")&&t.playVideo()}),e.addEventListener("mouseleave",function(){e.getAttribute("data-video-initialized")&&t.pauseVideo()})}})})},window.onload=function(){document.querySelectorAll(".list-item").forEach(function(e){e.setAttribute("data-video-initialized","true")})};
</script>
<!-- Autoplay Square Refresh -->

#3. Follow Step Fine to Step Nine in SquareRefresh Documention Page

#4. Note

Make sure you enabled Show Image in List Section

Autoplay

Buy me a coffee