Playing Video on Scroll

While scrolling, the background video scrubs along with the scroll amount of the user.

Set of Blocks

Cover block with this video: Pexel's Video by The Lazy Artist Gallery on Pexel (Note: the video must be only short. e.g. 3 seconds)

  • White Heading inside the video: “Fresh from Nature”
  • White text below it: “From nature’s simplicity comes pure, nourishing inspiration”

How it Works

Interaction: Page Scrolling Interaction - Scrubs through a video based on scroll progress.

Actions:

    • At 0% scroll → Video is at 0s    
    • At 20% scroll → Video reaches 14s    (end of video)

How to Use

Select the cover block to apply the interaction to, then import the interaction.

Interactions Used

Since Page Scrolling is categorized as a page interaction, it does not require an interaction trigger. When the interaction type is a page interaction, use the currently selected block as target of all the actions by default.

Code Block

Copy the whole markup below and paste it into a new post in your WordPress block editor.

<!-- wp:cover {"url":"http://e2etest.local/wp-content/uploads/2025/06/4631139-uhd_4096_2160_25fps.mp4","id":1276,"dimRatio":0,"customOverlayColor":"#FFF","isUserOverlayColor":false,"backgroundType":"video","focalPoint":{"x":0.38,"y":0.55},"isDark":false,"sizeSlug":"full","align":"full","style":{"border":{"radius":"0px","width":"0px","style":"none"},"spacing":{"blockGap":"0","padding":{"right":"0","left":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light" style="border-style:none;border-width:0px;border-radius:0px;padding-right:0;padding-left:0"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://e2etest.local/wp-content/uploads/2025/06/4631139-uhd_4096_2160_25fps.mp4" style="object-position:38% 55%" data-object-fit="cover" data-object-position="38% 55%"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#FFF"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","className":"is-style-default","style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-5"}}},"typography":{"fontStyle":"normal","fontWeight":"700"},"spacing":{"margin":{"top":"var:preset|spacing|20"}}},"textColor":"accent-5","fontSize":"xx-large"} -->
<p class="has-text-align-center is-style-default has-accent-5-color has-text-color has-link-color has-xx-large-font-size" style="margin-top:var(--wp--preset--spacing--20);font-style:normal;font-weight:700">Fresh from Nature</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-5"}}},"typography":{"fontSize":"14px"}},"textColor":"accent-5"} -->
<p class="has-text-align-center has-accent-5-color has-text-color has-link-color" style="font-size:14px">From nature’s simplicity comes pure, nourishing inspiration</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"391px"} -->
<div style="height:391px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:cover -->

Interaction Code

Copy the entire text below, and import it as a new interaction. See How to Import Interactions on how to do this.

{
    "type": "enterViewport",
    "timelines": [
        {
            "loop": false,
            "onceOnly": true,
            "alternate": false,
            "reset": false,
            "reverse": false,
            "actions": [
                {
                    "type": "toggleVideo",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0,
                        "duration": 0.5,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "mode": "play",
                        "startTime": "0"
                    }
                },
                {
                    "type": "toggleVideo",
                    "target": {
                        "type": "trigger",
                        "value": "",
                        "blockName": "",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 3,
                        "duration": 0.5,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "mode": "pause",
                        "startTime": ""
                    }
                }
            ]
        },
        {
            "loop": false,
            "onceOnly": false,
            "alternate": false,
            "reset": false,
            "reverse": false,
            "actions": []
        }
    ]
}