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.
Table of Contents
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"