Video Captions on Hover

What does this code do?

This code snippet will allow you to have the video captions display over the video on hover.

View fullsize

Set Up Your Video

To achieve this effect insert a video block. Then add in the video link, a custom thumbnail image, and a caption. You must use a custom thumbnail image for this code to work.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Video Captions */
.video-caption {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.4); /* overlay color */
  height: 100%;
  width: 100%;
  padding: 0;
  opacity: 0;
  display: flex;
  align-items: flex-end; /* align vertically */
 justify-content: center; /* align horizontally */
 font-size: 1.3rem !important; /* caption font size */
  color: white; /*caption font color */
}

.sqs-block-video:hover .video-caption {
  opacity: 1;
}

.sqs-video-icon {
  z-index: 9999;
}
.sqs-block-video iframe {
  z-index: 9999;
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the overlay and caption size, placement, and color.