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;
}
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"