elementor / elementor/static-html-output
[v6.6.7] HTML being parsed and re-written breaking <source> inside <video> or <picture> elements. (Workaround / Fix inside)
- 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

```
### 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.