Squarespace: Video Custom Block

by

Here are some codes and tips for Video Custom Block – Extended version of Video Block, allowing you to enable Autoplay on Mobile, Play on Scroll.

You can download Video Custom Block here.

Custom Play Icon

Add to Design > Custom CSS

[data-video-state="paused"] .control svg, [data-video-state="stopped"] .control svg  {
    opacity: 0;
}
[data-video-state="paused"] .control, [data-video-state="stopped"] .control {
    background-image: url(https://cdn.pixabay.com/photo/2022/05/24/04/38/study-7217599__480.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

playicon

Custom Pause Icon

Add to Design > Custom CSS

[data-video-state="paused"] .control svg {
    opacity: 0;
}
[data-video-state="playing"] .control {
    background-image: url(https://cdn.pixabay.com/photo/2021/11/09/02/29/theater-6780537__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Make Video Autoplay

Add to Video Code Block this code

data-auto-play="true"