Play GIF When Hovering Over A Video

Other PluginsFree

Jul 11

Play a portion of your video when you hover over a video block in Squarespace. In this tutorial, I’m going to show you how to display a gif when a user hovers over a video block.

Note: You’ll need to have a gif of your video ready for this tutorial to work, I don’t cover creating the gif in this tutorial.

Demo

Requirements

Thumbnail from your video
GIF From your video

This tutorial will not cover creating the GIF from a video. If you’re looking for a recommendation, I use GIF Brewery ($4.99 & for Macs)

Installation

Paste the below code into your Design » Custom CSS area.

Usage

First add a video block on your website. After you’ve added the block, toggle on the “Custom Featured Image” toggle and add a featured image you’d like visible when NOT hovering over the block, not the gif.

Then get the block-id of this video block. To target a specific video block on your website, use the Squarespace ID Finder tool (only available on Chrome) and target the video block you want this to work on.

Replace the #block-id in the code below with the block-id of your video block. If you’ve targeted the right block, you should see a dancing chihuahua as you hover over the block.

Then replace the url between parentheses in the background-image property with the URL of your gif. To upload a gif to your site, navigate to the Design » Custom CSS » Manage Custom Files area (bottom) of your website. Upload an image and then click on it to have the URL appear in the Custom CSS area.

Repeat this process to apply this to multiple videos.

The Code

  
/**
 * Play Gif When Hovering Over Video
 * From Will-Myers.com
**/
#replace-me {
  img {
    transition:opacity .3s ease;
  }
  .sqs-video-overlay::before{
    content: '';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:blue;
    background-image:url(https://media.giphy.com/media/wW95fEq09hOI8/giphy.gif);
    background-size:cover;
  }
  .intrinsic:hover {
    img {
      opacity:0;
    }
  }
}
  