fix(player): align video to center of provider container

closes #936
vidstack · Oct 3, 2023 · 67fadf6 · 67fadf6
1 parent b3eb1f4
commit 67fadf6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/react/src/hooks/use-player-query.ts b/packages/react/src/hooks/use-player-query.ts
@@ -17,6 +17,12 @@ import { PlayerQueryList } from 'vidstack/local';
  * const matches = usePlayerQuery("(width < 680) and (streamType: on-demand)");
  * ```
  *
+ * You can also use media queries:
+ *
+ * ```ts
+ * const matches = usePlayerQuery("@media (min-width: 300px)");
+ * ```
+ *
  * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-player-query}
  */
 export function usePlayerQuery(query: string): boolean {

diff --git a/packages/vidstack/player/styles/base.css b/packages/vidstack/player/styles/base.css
@@ -35,12 +35,13 @@
  */
 
 [data-media-provider] {
+  display: flex;
   position: relative;
-  display: block;
   box-sizing: border-box;
 }
 
 :where([data-media-provider]) {
+  align-items: center;
   width: 100%;
 }