1 files changed, 50 insertions, 0 deletions
diff --git a/components/watch/new-player/player.module.css b/components/watch/new-player/player.module.css
new file mode 100644
index 0000000..f2f5b39
--- /dev/null
+++ b/components/watch/new-player/player.module.css
@@ -0,0 +1,50 @@
+.player {
+  --media-brand: #f5f5f5;
+  --media-focus-ring-color: #4e9cf6;
+  --media-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
+
+  --media-tooltip-y-offset: 30px;
+  --media-menu-y-offset: 30px;
+
+  background-color: black;
+  border-radius: var(--media-border-radius);
+  color: #f5f5f5;
+  contain: layout;
+  font-family: sans-serif;
+  overflow: hidden;
+}
+
+.player[data-focus]:not([data-playing]) {
+  box-shadow: var(--media-focus-ring);
+}
+
+.player video {
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+
+.player video,
+.poster {
+  border-radius: var(--media-border-radius);
+}
+
+.poster {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.poster[data-visible] {
+  opacity: 1;
+}
+
+.poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}