Jump to content

Video on Hover

Recommended Posts

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>

 

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
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>

 

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.

Link to comment
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

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
  • 3 months later...
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

Add Link1 Min

Next, click Gear icon

Gear Icon2 Min

Next, click File > Upload File

Upload Files3 Min

Then upload your video.

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

Upload Files4 Min

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

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

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!

Edited by JhonJennifer
Link to comment
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>

 

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
  • 3 weeks later...

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 

 

 

Link to comment
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?

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
  • 3 weeks later...
  • 5 months later...
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

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.