Fluid layout hides video when VIDEO ID begins with a numeric

[nbibler]

Whenever the HTML VIDEO tag's ID attribute begins with a numeric value, the fluid option hides the video entirely. It looks as though the CSS rule is not generated for the element to set the proper padding.

For a demo of the failure, see http://jsbin.com/huveba/2/edit?html,output

Notice that the last two videos use a 1my-video ID attribute value (begin with a numeric).

HTML5 supports element IDs that begin with numerics (different from earlier HTML versions).

[nbibler]

Seemingly, an ID starting with a numeric value is now valid in HTML5. However, it looks like in CSS, selectors / class name that begins with a numeric may not be valid.

Perhaps a fix for this is to reverse the class name generated. Rather than generating 1my-video-dimensions it would likely work to generate dimensions-1my-video.

[gkatsev]

Huh, oops.
Changing the class makes sense, though, it might be considered a breaking change. We might want to special case this and only swap it if the id begins with a number and then when we're ready to do a major update do it for everything.
Care to submit a PR?
Thanks.

[nbibler]

Sure. If it's a concern about a breaking change… perhaps the approach going forward is to generate both, rather than conditionally generate one or the other?

[gkatsev]

Generating both might work, though, it might require us to make do blocks.

/* this may fail completely if a single selector fails, at least on older browsers */
.dimensions-1my-video, .1my-video-dimensions {
...
}

/* we'll need to do this instead */
.dimensions-1my-video {
...
}
.1my-video-dimensions {
...
}

[gkatsev]

Though, it's only needed if it actually fails. I know it's an issue around fullscreen selectors. Not sure about this case.

[nbibler]

Pull request added at #2829.