# elementor/trunk/modules/atomic-widgets/elements/atomic-background-video/handlers/background-video-preview-handler.js

Elementor Website Builder – more than just a page builder, version trunk. 28 lines.

- Page: https://pluginprobe.com/plugins/elementor/trunk/code/modules/atomic-widgets/elements/atomic-background-video/handlers/background-video-preview-handler.js
- Raw: https://pluginprobe.com/plugins/elementor/trunk/raw/modules/atomic-widgets/elements/atomic-background-video/handlers/background-video-preview-handler.js
- Modified: 2026-09-17T09:04:38+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/elementor/trunk/code/modules/atomic-widgets/elements/atomic-background-video/handlers/background-video-preview-handler.js#L10-L20`.

```javascript
import { register } from '@elementor/frontend-handlers';
import { refreshTree } from '@elementor/alpinejs';
import { resolveDesignTimeState, setEditorState } from './editor-background-video-state';
import { CONTROLS_ELEMENT_TYPE, PAUSE_ELEMENT_TYPE, PLAY_ELEMENT_TYPE } from './background-video-handler';

register( {
	elementType: 'e-background-video',
	id: 'e-background-video-preview-handler',
	callback: ( { element, settings, listenToChildren } ) => {
		const elementId = element.dataset.id;

		setEditorState( elementId, resolveDesignTimeState( settings.state ) );
		refreshTree( element );

		listenToChildren( [ PLAY_ELEMENT_TYPE, PAUSE_ELEMENT_TYPE, CONTROLS_ELEMENT_TYPE ] )
			.render( ( event ) => {
				const childElement = event.detail.element;
				const nearestBackgroundVideo = childElement.closest( '[data-e-type="e-background-video"]' );

				if ( nearestBackgroundVideo !== element ) {
					return;
				}

				refreshTree( element );
			} );
	},
} );

```