Add default styling for print #3304
Conversation
By default in print, only show either the poster, or the current tech element. This matches the behavior of the HTML5 video element for most user agents.
| @@ -0,0 +1,5 @@ | |||
| @media print { | |||
| .video-js *:not(.vjs-tech):not(.vjs-poster) { | |||
| visibility:hidden; | |||
There was a problem hiding this comment.
Are we sure that visibility: hidden does not create blank areas in the printed page? Is there some advantage to it over display: none?
There was a problem hiding this comment.
Using visibility:hidden guarantees that we don't have a reflow of the page. 'you print what you see' in terms of dimensions. When using display:none; you are actively removing things from the canvas, which can influence the dimensions and behavior of other elements.
In reality, it probably won't matter much unless someone writes a 'bad' plugin.
Add the print styles as late as possible, since in general we want to override things from screen. Adding it last, makes sure we don't need over specific rules
|
This diff contains some further ideas on what I want to do for print. But it is probably better to deal with that in a later pull request. |
We do not want to apply this styling to children of vjs-tech either.
| @@ -0,0 +1,5 @@ | |||
| @media print { | |||
| .video-js > *:not(.vjs-tech):not(.vjs-poster) { | |||
There was a problem hiding this comment.
Is there an easy way of supporting IE8?
There was a problem hiding this comment.
I vote we don't even ask this question anymore :)
There was a problem hiding this comment.
Haha, that's why I stressed "easy". As part of 5.x, we should still try and support IE8, we don't have to try very hard though :)
There was a problem hiding this comment.
And we definitely shouldn't actively break it.
There was a problem hiding this comment.
Yeah sorry, that was mostly a troll. You're right on all points, I was just adding the obligatory anti-IE8-support voice.
There was a problem hiding this comment.
Well we could invert the selector to only hide things explicitly listed, but you would have to basically do that for every single plugin or element that might want to add something to the player DOM. I don't really think that that is maintainable in practice.
gkatsev
added
minor
|
One question that's mostly optional, LGTM otherwise. |
|
LGTM if @gkatsev's question gets an answer 😄 |
gkatsev
added
confirmed
and removed
needs: LGTM
Description
Printing a page containing video.js currently is a rather messy state.
Controls are partially visible, as many of them are text (videojs-font), yet all images and backgrounds
are usually stripped by the user-agent from the print.
Specific Changes proposed
Hide all elements other than the poster and/or the tech.
Requirements Checklist
By default in print, only show either the poster, or the current tech
element. This matches the behavior of the HTML5 video element for most
user agents.
The video-js poster currently uses a background image, which usually gets stripped by browsers,
when printing. I also propose changing the poster element to be an img element instead of a background image.