# elementor/4.3.0/modules/atomic-widgets/elements/atomic-background-video/atomic-background-video.html.twig

Elementor Website Builder – more than just a page builder, version 4.3.0. 35 lines.

- Page: https://pluginprobe.com/plugins/elementor/4.3.0/code/modules/atomic-widgets/elements/atomic-background-video/atomic-background-video.html.twig
- Raw: https://pluginprobe.com/plugins/elementor/4.3.0/raw/modules/atomic-widgets/elements/atomic-background-video/atomic-background-video.html.twig
- Modified: 2026-09-01T11:47:36+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/4.3.0/code/modules/atomic-widgets/elements/atomic-background-video/atomic-background-video.html.twig#L10-L20`.

```twig
{% import 'elementor/macros' as m %}
{% set state_class = '' %}
{% if settings.state == 'playing' %}{% set state_class = 'e-background-video--playing' %}{% endif %}
{% if settings.state == 'paused' %}{% set state_class = 'e-background-video--paused' %}{% endif %}
{% set classes = ['e-background-video', 'e-con', 'e-atomic-element', base_styles.base, state_class, m.default_tag_class('div')] | merge(settings.classes | default([])) | join(' ') %}
<div class="{{ classes }} {{ editor_classes | default('') }}"
	data-id="{{ id }}"
	data-element_type="{{ type }}"
	data-e-type="{{ type }}"
	data-interaction-id="{{ interaction_id }}"
	data-interactions="{{ interactions | json_encode | e('html_attr') }}"
	x-data="eBackgroundVideo{{ id }}"
	x-bind="rootState"
	data-e-settings="{{ settings | json_encode | e('html_attr') }}"
	{% if settings._cssid is defined and settings._cssid is not empty %}
		id="{{ settings._cssid | e('html_attr') }}"
	{% endif %}
	{% if settings.attributes is defined and settings.attributes is not empty %}
		{{ settings.attributes | raw }}
	{% endif %}
	{{ editor_attributes | default('') | raw }}>
	{% if settings.source.url is not empty %}
		<video class="e-background-video__media"
			aria-hidden="true"
			{% if settings.autoplay %}autoplay{% endif %}
			{% if settings.mute %}muted{% endif %}
			{% if settings.loop %}loop{% endif %}
			playsinline
			preload="auto">
			<source src="{{ settings.source.url | e('full_url') }}{{ video_timings }}">
		</video>
	{% endif %}
	<!-- elementor-children-placeholder -->
</div>

```