elementor / elementor/static-html-output

[v6.6.7] HTML being parsed and re-written breaking <source> inside <video> or <picture> elements. (Workaround / Fix inside)

Open
#2 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
128
Forks
35
PR merge metrics
No merged PRs in 30d

Description

I'm one of these old farts that was around when validating your HTML was cool enough to warrant putting a badge on your site, so still validate my code, and noticed an issue yesterday with our static site. If you write the following HTML:

```html



Sorry, your browser doesn't support embedded videos.

```

So if your browser cannot play the _webm_ video, it goes to the **next** element, and tries to play the _mp4_ video, if it can't do this it goes to the **next** element, which in this case is just a message saying your browser doesn't support embedded videos.

But, after WP2Static has parsed it with `DOMDocument()`, you will end up with:

```html

Sorry, your browser doesn't support embedded videos.

```

Which if you add the line-breaks and tabs in, it is clearer why this doesn't work.

```html



Sorry, your browser doesn't support embedded videos.



```

Now this isn't correct. What this leads to is if your browser cannot play the _webm_ video, it has nothing to try next, it ignores everything inside ``, as `` is not a tag that wraps other tags, technically, `` isn't a tag, it will fail validation, which is how I discovered this issue.

# Fix / Workaround

End your `` elements XHTML style like this: ``

```html



Sorry, your browser doesn't support embedded videos.

```

This isn't required by the HTML5 specification, nor is it encouraged as it could lead you to assume the element can wrap or have a separate closing element, but it does resolve the issue and instead of ending up with nested elements, you end up with this, which browsers will be able to understand (even though it is not the HTML5 specification)

```html



Sorry, your browser doesn't support embedded videos.

```

This doesn't make your static HTML validate, but browsers should hopefully be able to try each source in order falling back to the **next** one if they can't play it.

# Picture Element

Same workaround applies to the `` element if using `srcset`, close the `` tags XHTML style like this: ``

```html



logo

```

### References

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.