Skip to content

Fix: HTML tags are not working in Background Video [ED-25625] - #37407

Merged
max-zu merged 7 commits into
mainfrom
ED-25625-background-video-html-tag
Sep 23, 2026
Merged

max-zu merged 7 commits into
mainfrom
ED-25625-background-video-html-tag

Conversation

@max-zu

@max-zu max-zu commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

PR Checklist

PR Type

  • Bugfix

Summary

This PR can be summarized in the following changelog entry:

  • Fix: HTML tags do not work in Background Video

Description

  • The Background Video template hardcoded <div> and e-default-div, ignoring the computed tag from the HTML Tag setting. It now renders {{ tag | e('html_tag') }} and m.default_tag_class(tag), same as Flexbox.
  • Added main and nav to the tag enum, its description, and the HTML Tag control options (matching Flexbox).

Test instructions

  • Add a Background Video element, set Settings > HTML Tag to Section (or Main / Nav).
  • The editor preview and the published page render <section class="... e-default-section">; playback and play/pause controls keep working.
  • An element without an explicit tag still renders as <div>.

Quality assurance

  • I have tested this code to the best of my abilities
  • I have added unittests to verify the code works as intended

PHPUnit: schema enum, render per tag (8 tags), default div, invalid tag fallback. Playwright: tag applied in editor and frontend, Main/Nav options present.

Fixes #37393

Jira: ED-25625

Visual proof

Broken: Changing HTML Tag on Background Video had no effect; the canvas and published page always rendered a div wrapper.
Where: Edit with Elementor → select Background Video → Settings → HTML Tag
Steps: Add Background Video → select it → open Settings → set HTML Tag to Section → view the element on the canvas
Pass: The canvas wrapper is a section and Background Video still plays with visible controls
Fail: The canvas wrapper stays a div no matter which HTML Tag is selected

✨ PR Description

aborted due to parallel requests - superseded: PR description generation aborted at after AI call: A newer description request has started for this PR

Generated by LinearB AI and added by gitStream.
AI-generated content may contain inaccuracies. Please verify before using.
💡 Tip: You can customize your AI Description using Guidelines Learn how

Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions

Copy link
Copy Markdown
Contributor

Review Summary

✅ Overall: Focused bugfix with solid PHPUnit and Playwright coverage; Twig now mirrors Flexbox (tag + e('html_tag') + m.default_tag_class(tag)), and main/nav match the Flexbox HTML Tag set.

No critical issues found in the diff.

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review completed. See summary comment.

@github-actions github-actions Bot added the auto-reviewed PR has been automatically reviewed by CI label Sep 23, 2026
@github-actions

github-actions Bot commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

Elementor Build

Last updated at: 20260923.1209
Version: 4.4.0-20260923.1209

✅ Elementor build is ready for download.

You can download the latest build from the link below:

🔗 elementor-4.4.0-20260923.1209.zip

The build is available for 3 days.

@github-actions

github-actions Bot commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

Visual proof

Shots and a short recording from this PR’s Playground preview. A storyboard actor followed Steps from the PR’s Visual proof section (happy path / Pass). Overlay text includes Broken; CI does not recreate the bug.

01-background-video-added.png
01-background-video-added.png

02-settings-html-tag.png
02-settings-html-tag.png

03-html-tag-section.png
03-html-tag-section.png

04-pass-section-wrapper.png
04-pass-section-wrapper.png

Recording (visual-proof.webm) — GitHub may not play this inline; download if needed.

Also on the workflow run.

github-actions Bot added a commit that referenced this pull request Sep 23, 2026
github-actions Bot added a commit that referenced this pull request Sep 23, 2026
github-actions Bot added a commit that referenced this pull request Sep 23, 2026
github-actions Bot added a commit that referenced this pull request Sep 23, 2026
github-actions Bot added a commit that referenced this pull request Sep 23, 2026
Ntnelbaba
Ntnelbaba previously approved these changes Sep 23, 2026

@Ntnelbaba Ntnelbaba left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approve with nits — ED-25625 looks good.

Twig now uses the computed tag + m.default_tag_class(tag) instead of a hardcoded div / e-default-div. main/nav match Flexbox’s semantic set (correctly omitting a/button, which need link wiring). tag comes from Has_Element_Template::build_base_template_context() → get_computed_html_tag(), and invalid wrappers are coerced via e('html_tag') → Utils::validate_html_tag(). Handlers/CSS are class- and data-e-type-based, so non-div roots should not break play/pause.

AC covered: Section renders as <section class="… e-default-section">, default stays div, Main/Nav in the control. PHPUnit green; Playwright was still running at review time.

Two low test nits inline — neither blocks merge.

Comment thread tests/playwright/sanity/modules/v4-tests/background-video.test.ts Outdated
@github-actions

github-actions Bot commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

PR CI summary

Job Status
Install dependencies success
Build plugin success
Lint JS success
Lint PHP success
Jest success
QUnit success
PHPUnit failure
Playwright skipped

View workflow run

Co-authored-by: Maksim Zubov <zubovmaksim@gmail.com>
cursoragent and others added 3 commits September 23, 2026 11:42
… [ED-25625]

Co-authored-by: Maksim Zubov <zubovmaksim@gmail.com>
Co-authored-by: Maksim Zubov <zubovmaksim@gmail.com>
… [ED-25625]

Co-authored-by: Maksim Zubov <zubovmaksim@gmail.com>

@Ntnelbaba Ntnelbaba left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

APPROVE — re-review at d679176 after the prior nits.

Both inline nits are addressed:

  • Invalid-tag PHPUnit now asserts e-default-div and no e-default-script, and get_computed_html_tag() / Twig default_tag_class both go through the validated html_tag.
  • Playwright frontend locator is scoped with data-id + data-e-type.

CI is green (Pull Request Validations + Playwright). No new blockers.

@max-zu
max-zu merged commit 7fd38c3 into main Sep 23, 2026
75 checks passed
@max-zu
max-zu deleted the ED-25625-background-video-html-tag branch September 23, 2026 12:35
github-actions Bot pushed a commit that referenced this pull request Sep 23, 2026
## PR Checklist
- [x] The commit message follows our guidelines:
https://github.com/elementor/elementor/blob/master/.github/CONTRIBUTING.md

## PR Type
- [x] Bugfix

## Summary

This PR can be summarized in the following changelog entry:

* Fix: HTML tags do not work in Background Video

## Description

* The Background Video template hardcoded `<div>` and `e-default-div`,
ignoring the computed `tag` from the HTML Tag setting. It now renders
`{{ tag | e('html_tag') }}` and `m.default_tag_class(tag)`, same as
Flexbox.
* Added `main` and `nav` to the `tag` enum, its description, and the
HTML Tag control options (matching Flexbox).

## Test instructions

* Add a Background Video element, set Settings > HTML Tag to Section (or
Main / Nav).
* The editor preview and the published page render `<section class="...
e-default-section">`; playback and play/pause controls keep working.
* An element without an explicit tag still renders as `<div>`.

## Quality assurance

- [x] I have tested this code to the best of my abilities
- [x] I have added unittests to verify the code works as intended

PHPUnit: schema enum, render per tag (8 tags), default div, invalid tag
fallback. Playwright: tag applied in editor and frontend, Main/Nav
options present.

Fixes #37393

Jira: [ED-25625](https://elementor.atlassian.net/browse/ED-25625)

[ED-25625]:
https://elementor.atlassian.net/browse/ED-25625?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
## Visual proof

**Broken:** Changing HTML Tag on Background Video had no effect; the
canvas and published page always rendered a div wrapper.
**Where:** Edit with Elementor → select Background Video → Settings →
HTML Tag
**Steps:** Add Background Video → select it → open Settings → set HTML
Tag to Section → view the element on the canvas
**Pass:** The canvas wrapper is a section and Background Video still
plays with visible controls
**Fail:** The canvas wrapper stays a div no matter which HTML Tag is
selected


<!--start_gitstream_placeholder-->
### ✨ PR Description
aborted due to parallel requests - superseded: PR description generation
aborted at after AI call: A newer description request has started for
this PR

_Generated by LinearB AI and added by gitStream._
<sub>AI-generated content may contain inaccuracies. Please verify before
using.
💡 **Tip:** You can customize your AI Description using **Guidelines**
[Learn
how](https://docs.gitstream.cm/automation-actions/#describe-changes)</sub>
<!--end_gitstream_placeholder-->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
max-zu added a commit that referenced this pull request Sep 23, 2026
…g in Background Video [ED-25625] (#37412)

Automatic cherry-pick of
[#37407](#37407) to
`release/stable` branch.

      **Source:** elementor/elementor
      **Original Author:** @max-zu
      **Trigger:** Label `cp_release/stable` added to closed PR

---------

Co-authored-by: Maksim Zubov <zubovmaksim@gmail.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@KingGrizzly

Copy link
Copy Markdown

Great job!

This branch was successfully deployed

1 active deployment
playground-preview — d679176c Deployed Sep 23, 2026 by github-actions[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

✅ 🐞 Background Video ignores its HTML Tag setting and always renders a div

4 participants