Jump to content

Video play on hover with custom code.

Recommended Posts

Hi,

I tried to integrate a feature in video gallery when user hover over the video thumbnail it should play and stop when hover out. something similar like this site: https://camillesummersvalli.com/
I am unable to achieve it with squarespace: https://mushroom-kazoo-56xp.squarespace.com/work-1. I write this js code: 

window.addEventListener("DOMContentLoaded", (event) => {
document.querySelectorAll("video").forEach((el) => {
el.addEventListener("mouseover", function (e) {
this.play();
});
});
document.querySelectorAll("video").forEach((el) => {
el.addEventListener("mouseleave", function (e) {
this.pause();
});
});
});

But this doesn't work, inspect and check for any bugs there is none. Don't know why this is not working. After spending 5-6 hours I tried with Wordpress it worked. Here:https://slicegeek.org/SUBTROPIC/gallery/ 

Can somebody tell me what went wrong, can it be achieved with Squarespace or do i need to switch to wordpress. Really appreciate your help. Thanks

Link to comment
  • Replies 2
  • Views 399
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.