Video on Hover

Hello,

Could you please advise on how to set up a video so that it starts playing on hover, but with a video file rather than a YouTube or Vimeo link? Also, the video should have sound.

Thank you.

Link: https://mathieu.squarespace.com/

Password: Glou

Hi,

I just did an example, is this what you want?

https://codepen.io/konicarom/pen/qBLqoRp

On 9/6/2023 at 1:05 PM, tuanphan said:

Hi,

I just did an example, is this what you want?

https://codepen.io/konicarom/pen/qBLqoRp

Hi, @tuanphan. Thank you! Yes, you are correct; I meant something like that. I would actually need only the hover effect for videos so that they can stay still until the hover.

15 hours ago, geglaja said:

Hi, @tuanphan. Thank you! Yes, you are correct; I meant something like that. I would actually need only the hover effect for videos so that they can stay still until the hover.

You can add video with this Code Block

<div class="video-container">
        <video class="video" src="https://www.w3schools.com/tags/movie.mp4" muted loop></video>
</div>
<style>
  .video-container {
    position: relative;
    width: 400px;
    height: 300px;
    padding: 40px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(1);
}

.video-container:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
}

.video-container:hover .video {
    opacity: 1;
    transform: scale(1.05);
}

</style>
<script>
  const video = document.querySelector('.video');

video.addEventListener('mouseover', function () {
    this.play();
});

video.addEventListener('mouseout', function () {
    this.pause();
    this.currentTime = 0;
});

</script>

3 hours ago, tuanphan said:

You can add video with this Code Block

<div class="video-container">
        <video class="video" src="https://www.w3schools.com/tags/movie.mp4" muted loop></video>
</div>
<style>
  .video-container {
    position: relative;
    width: 400px;
    height: 300px;
    padding: 40px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(1);
}

.video-container:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
}

.video-container:hover .video {
    opacity: 1;
    transform: scale(1.05);
}

</style>
<script>
  const video = document.querySelector('.video');

video.addEventListener('mouseover', function () {
    this.play();
});

video.addEventListener('mouseout', function () {
    this.pause();
    this.currentTime = 0;
});

</script>

 

On 9/9/2023 at 8:05 PM, geglaja said:

Hello @tuanphan Thanks!

Do you have any advice for making video autoplay hovers work in Safari like they do in Chrome? Thank you for your help.

You mean this code doesn't work on Safari? I will check it again

Hi @tuanphan

It works after you initiate the play of any video once (on Safari). Then it works as expected.

https://www.mathieuneil.com/ (MEDIAS)

Thanks, 

Gerda

Hi @tuanphan! 

This code is amazing. Is there any way we can get it to work from videos on vimeo?

6 hours ago, c_rissy said:

Hi @tuanphan! 

This code is amazing. Is there any way we can get it to work from videos on vimeo?

If you have paid vimeo, you can get video direct url and add to code

Thanks so much for your reply@tuanphan 

unfortunately my client doesn't have a paid account. Is there any alternative? 

Or is there a way to get the direct URL if I upload the videos to the Asset Library on Squarespace?

23 hours ago, c_rissy said:

Thanks so much for your reply@tuanphan 

 

unfortunately my client doesn't have a paid account. Is there any alternative? 

Or is there a way to get the direct URL if I upload the videos to the Asset Library on Squarespace?

I can't find a way to get URL via Asset Library

But you can add follow this

Click Plus icon > Choose Link

Next, click Gear icon

Next, click File > Upload File

Then upload your video.

After uploading the videos, you need to click Cancel. This will not delete videos.

Suppose your site is rissy.squarespace.com

and video name is: mountain-river.mp4

The video url will be

https://rissy.squarespace.com/s/mountain-river.mp4

@tuanphan GENIUS! It worked!! Thank youuu

Here is the site I'm working on: 
https://kumquat-butterfly-r966.squarespace.com/
PW: sarah

It seems to work only on 1 video and won't work on the video below it. I added in the exact same code from the first one.

Want a video that pops up and plays just as your cursor glides over it? No problem! You can ditch YouTube links and embrace the power of HTML/CSS/Javascript to create a captivating hover-triggered video experience. Think of your video as a hidden treasure, tucked away within an HTML container. Javascript acts as your key, unlocking the video and unleashing its visual and sonic delights when your mouse hovers over the container. A beautifully styled "play" button serves as your invitation, beckoning you to click and reveal the hidden magic. With a few lines of code, you'll see the video element emerge from its hiding place, playing its melody and filling your screen with vibrant visuals. And the best part? You control the sound! No need to worry about muted videos – with a simple setting, you can ensure the audio joins the party. So go ahead, unleash your inner video maestro, code your masterpiece, and watch your hover-activated video captivate your audience!

On 12/14/2023 at 8:51 AM, c_rissy said:

@tuanphan GENIUS! It worked!! Thank youuu

Here is the site I'm working on: 
https://kumquat-butterfly-r966.squarespace.com/
PW: sarah

It seems to work only on 1 video and won't work on the video below it. I added in the exact same code from the first one.

2 Code Block will conflict together, with video 2, use this code

<div class="video-container2">
        <video class="video2" src="https://www.w3schools.com/tags/movie.mp4" muted loop></video>
</div>
<style>
  .video-container2 {
    position: relative;
    width: 400px;
    height: 300px;
    padding: 40px;
    margin: 20px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.video2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(1);
}

.video-container2:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
}

.video-container2:hover .video {
    opacity: 1;
    transform: scale(1.05);
}

</style>
<script>
  const video2 = document.querySelector('.video2');

video2.addEventListener('mouseover', function () {
    this.play();
});

video2.addEventListener('mouseout', function () {
    this.pause();
    this.currentTime = 0;
});

</script>

Amazing thank you SO much @tuanphan

HI @tuanphan I am having trouble creating a hover state to link to a video play (youve mentioned in other forum topics to use GIFs but they make the website quite heavy and the colour quality isnt great.

Is there a way for the hover states on the thumbnails of the website below to link to short video clips hosted on vimeo?

Website:  https://bumblebee-reed-dhn7.squarespace.com/

Password: Charlie1234

On the homepage you can see I have coded in some GIFs as hover states but would want these to link to a video file

Thanks so much
Chris 

On 1/8/2024 at 2:21 AM, ChrisCooper said:

HI @tuanphan I am having trouble creating a hover state to link to a video play (youve mentioned in other forum topics to use GIFs but they make the website quite heavy and the colour quality isnt great.

Is there a way for the hover states on the thumbnails of the website below to link to short video clips hosted on vimeo?

Website:  https://bumblebee-reed-dhn7.squarespace.com/

Password: Charlie1234

On the homepage you can see I have coded in some GIFs as hover states but would want these to link to a video file

Thanks so much
Chris 

 

 

Hover it >> Show video

Or

Hover it >> Open Video in Lightbox

Or?

Hi @tuanphan

Hover over and it plays a video as a thumbnail

Thanks

8 hours ago, ChrisCooper said:

Hi @tuanphan

Hover over and it plays a video as a thumbnail

 

Thanks

The site is expired, you can access this link to extend it for free

Hi @tuanphan - that should be back online now!

Website:  https://bumblebee-reed-dhn7.squarespace.com/

Password: Charlie1234

On 1/16/2024 at 2:00 AM, ChrisCooper said:

Hi @tuanphan

Hover over and it plays a video as a thumbnail

 

Thanks

You mean hover on play icon >> Play video on a small red box behind logo, text, play icon?

Hi @tuanphan

Apologies for the delay - this has been changed now so we do not need the solution but thank you for checking in

Chris

Hello @tuanphan

I am currently working on a website for a client and he wants the videos on the website to start when the mouse is hover and to stop when the mouse isn't hover anymore. What you said in this topic isn't working and i'd need a bit of help. Thank you very much !

18 hours ago, Remilp said:

Hello @tuanphan

I am currently working on a website for a client and he wants the videos on the website to start when the mouse is hover and to stop when the mouse isn't hover anymore. What you said in this topic isn't working and i'd need a bit of help. Thank you very much !

Yes. It is possible now 👌. I just solved a case yesterday. You can share link to page where you use Video, I will adjust & give code for your case

On 7/19/2024 at 3:48 AM, tuanphan said:

Yes. It is possible now 👌. I just solved a case yesterday. You can share link to page where you use Video, I will adjust & give code for your case

Hi!, when adding the code it displays the message “code removed“