Video with Overlay, Title, Clickable

Demo: https://tuanphan3.squarespace.com/video-clickable-v2?noredirect

Password: abc

#1. First, you need to add a Text Block over the whole Video.

In Text Block, you add a Title and a small text. Add a link to both small texts.

#2. Set small texts to Monospace

#3. Click this icon to set the Overlay Color

#4. Install Squarespace ID Finder (free), and find the ID of Text Blocks.

In my example, we will have:

Left text block: #block-61bb8ab4d922fb045f32
Right text block: #block-3ae8609f9ee7b556f38e

#5. Use this code to Custom CSS box

div#block-61bb8ab4d922fb045f32, div#block-3ae8609f9ee7b556f38e {
    opacity: 0 !important;
    transition: all 0.1s;
}

div#block-61bb8ab4d922fb045f32:hover, div#block-3ae8609f9ee7b556f38e:hover {
    opacity: 1 !important;
    transition: all 0.1s;
}

div#block-61bb8ab4d922fb045f32 a, div#block-3ae8609f9ee7b556f38e a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    border: none !important;
    text-decoration: none !important;
    color: transparent !important;
    opacity: 0 !important;
}

#6. Explain a bit

Ask me a question, free