Jump to content

Video on Hover

Recommended Posts

On 7/24/2024 at 7:20 PM, Remilp said:

Here you go : https://contrabass-ruby-4lc9.squarespace.com/

Password : Harris2024

Id like to put this video : 

 

Use this to Website Tools > Code Injection > Footer

<script>
  window.addEventListener("load", (event) => {
const videosWrapper = document.querySelectorAll(".plyr__video-wrapper");
videosWrapper.forEach((wrapper) => {
  const videoBackground = wrapper.querySelector(".plyr__poster");
  videoBackground.addEventListener("mouseenter", () => {
    const video = wrapper.querySelector("video");
    video.muted = true;
    video.play();
  });
  videoBackground.addEventListener("mouseleave", () => {
    const video = wrapper.querySelector("video");
    video.muted = true;
    video.pause();
  });
});
  });
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

THANKS A LOTTTT, it's working !!!!!!

Just one more question, is it possible for the video to reset when the mous leaves ? 

And i also want the sound of the video to be on if it's possible !!

Edited by Remilp
new information
Link to comment
22 hours ago, Remilp said:

THANKS A LOTTTT, it's working !!!!!!

Just one more question, is it possible for the video to reset when the mous leaves ? 

And i also want the sound of the video to be on if it's possible !!

#1. I don't see video now. Can you check it again?

#2. Change to 

false

image.thumb.png.1d8958db104e8b5895bd0593181f3de1.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.