Change image on hover (Gallery gif -> mp4)

Hey !

On my website (erwanlier.com) I have a gallery (work). Whenever someone hover on one of my project I run a code that hides the image and in the background, a gif is playing. So when someone hover, they have a gif playing.

the code is written here: 

a.grid-item:hover img { 
	visibility: hidden;
}

.grid-item[href="/home/dhi-2022"] {
	background-image: url("https://static1.squarespace.com/static/5eedccbef70ff2565afd836e/t/65002af157ba1551a0f27331/1694509815813/DHI-ezgif-compression-15-12fps.gif");
	background-repeat: no-repeat;
	background-size: cover;
}

I would like to change the gif to an mp4 file ... but it's not working when I upload the mp4 instead of the gif and replace the link.

What code should I use? Thanks

Hi, 

Video file won't work in background-image code, it will be more complex.

You can consider using plugin to make video appears in lightbox when hover image.

Or you can also use this code, it will require some efforts

#1. 

First, you need to find Portfolio items url

Hover on each Portfolio item > Click 3 dots > Settings

You will see URL Slug

#2. Next, you need to get Video Direct URL

With Vimeo, you will need to use Paid Plan to able to get direct URL

With Youtube, no way to get this url, you need to download video then upload to Squarespace.

#3. Use this code to Portfolio Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/people-eb852-draft"] .grid-image-inner-wrapper');
  $('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/interiors-dmhc5"] .grid-image-inner-wrapper');
});
</script>
<style>
a.grid-item[href="/photography/people-eb852-draft"] img, a.grid-item[href="/photography/interiors-dmhc5"] img {
  visibility: hidden;
  }
  .grid-image-inner-wrapper video {
    display: block !important;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
</style>

#4. Explain

This code will add video to first portfolio item with url slug: /photography/people-eb852-draft

$('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/people-eb852-draft"] .grid-image-inner-wrapper');

This code will add video to second portfolio item with url slug /photography/interiors-dmhc5

$('<video autoplay loop muted><source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4" type="video/mp4"></video>').appendTo('a.grid-item[href="/photography/interiors-dmhc5"] .grid-image-inner-wrapper');

You can repeat the code & replace example videos with your video url