Play When Entering Viewport

This interaction triggers a short background video to play until the end when the cover block enters the viewport 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: “Where the Journey Begins”
  • White text below it: “Endless roads, open skies, and the power to go anywhere”

How it Works

Trigger: Enter Viewport  - When the Cover block scrolls into view.

Actions:

    • Play Video from 0s    
    • Pause Video automatically after the video duration (~3 seconds)

How to Use

  1. Add provided blocks
  2. Select the Cover block
  3. Import the interaction

Interactions Used


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/1572321-uhd_2560_1440_24fps.mp4","id":1288,"dimRatio":0,"customOverlayColor":"#FFF","isUserOverlayColor":false,"backgroundType":"video","focalPoint":{"x":0.32,"y":0.38},"isDark":false,"sizeSlug":"full","align":"full","style":{"border":{"radius":"0px","width":"0px","style":"none"},"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull is-light" style="border-style:none;border-width:0px;border-radius:0px"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="http://e2etest.local/wp-content/uploads/2025/06/1572321-uhd_2560_1440_24fps.mp4" style="object-position:32% 38%" data-object-fit="cover" data-object-position="32% 38%"></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…","style":{"elements":{"link":{"color":{"text":"#ede2d4"}}},"typography":{"fontSize":"45px","fontStyle":"normal","fontWeight":"700"},"color":{"text":"#ede2d4"}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#ede2d4;font-size:45px;font-style:normal;font-weight:700">Where the Journey Begins</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#ede2d4"}}},"color":{"text":"#ede2d4"},"typography":{"fontSize":"16px"}}} -->
<p class="has-text-align-center has-text-color has-link-color" style="color:#ede2d4;font-size:16px">Endless roads, open skies, and the power to go anywhere</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"32px"} -->
<div style="height:32px" 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": []
        }
    ]
}