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