fix(skin): fix fullscreen video clipping and border-radius handling (#905)

packages/skins/src/default/css/components/media.css

@@ -7,8 +7,13 @@
   display: block;
   width: 100%;
   height: 100%;
+}
+.media-default-skin ::slotted(video) {
   border-radius: var(--media-border-radius, 2rem);
 }
+.media-default-skin video {
+  border-radius: inherit;
+}
 
 /* ==========================================================================
    Poster Image
@@ -28,3 +33,16 @@
     opacity: 0;
   }
 }
+
+/* ==========================================================================
+   Fullscreen
+   ========================================================================== */
+
+.media-default-skin:fullscreen video,
+.media-default-skin:fullscreen ::slotted(video),
+.media-default-skin > img {
+  object-fit: contain;
+}
+.media-default-skin:fullscreen ::slotted(video) {
+  border-radius: 0;
+}

packages/skins/src/default/css/components/root.css

@@ -21,8 +21,4 @@
   letter-spacing: normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-
-  &:fullscreen {
-    border-radius: 0;
-  }
 }

packages/skins/src/default/css/video.css

@@ -42,6 +42,10 @@
     box-shadow: inset 0 0 0 1px var(--media-border-color);
     pointer-events: none;
   }
+
+  &:fullscreen {
+    border-radius: 0;
+  }
 }
 
 /* ==========================================================================