add responsive example using container queries #347
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
examples/responsive.html
Outdated
| display: none; | ||
| } | ||
| } | ||
| @container (min-width: 590px) { |
examples/responsive.html
Outdated
| display: none; | ||
| } | ||
| } | ||
| @container (max-width: 420px) { |
There was a problem hiding this comment.
small view. Needs to come after the medium view due to specificity ordering since safari doesn't support @container (min-width: 420px) and (max-width: 590px) while chrome does.
examples/responsive.html
Outdated
| justify-content: space-evenly; | ||
| } | ||
|
|
||
| @container (max-width: 590px) { |
There was a problem hiding this comment.
medium view. Ideally, this would be @container (min-width: 420px) and (max-width: 590px) but not supported in Safari.
| slot="media" | ||
| src="https://stream.mux.com/DS00Spx1CV902MCtPj5WknGlR102V5HFkDe/high.mp4" | ||
| muted | ||
| crossorigin="anonymous" |
There was a problem hiding this comment.
firefox wasn't liking crossorigin only.
| } | ||
|
|
||
| @container (max-width: 590px) { | ||
| .centered-controls-overlay:not(.container-query-polyfill) { |
There was a problem hiding this comment.
the polyfill was saying that we need to add the :not(.container-query-polyfill) because it's saying that :where isn't supported, though, supposedly, :where is available according to caniuse.com https://caniuse.com/mdn-css_selectors_where
|
If/when GoogleChromeLabs/container-query-polyfill#65 gets merged, the separate responsive-polyfill page can probably be removed because :where support goes pretty far back. Though, :where won't be on smart TVs for years |
gkatsev
force-pushed
the
responsive-example
branch
from
b1cd6e6 to
0241fd3
Compare
gkatsev
force-pushed
the
responsive-example
branch
from
43179f6 to
72bf6b6
Compare
gkatsev
force-pushed
the
responsive-example
branch
from
72bf6b6 to
5da8d58
Compare
| @@ -10,7 +10,9 @@ provide one configuration for a responsive media player. However media themes | |||
| will be introduced soon that can provide responsive behavior by default. | |||
There was a problem hiding this comment.
remove media themes sentence
| </media-control-bar> | ||
| </media-controller> | ||
| ``` | ||
| And it'll look like this: |
left to do in this PR: