New: Introduced support for Theme Videos

- they should be placed inside `backdrops` folder like:
` ./Movie (Year)/backdrops/theme1.mp4`

Theme/ElegantFin-theme-nightly.css

@@ -1249,23 +1249,21 @@ select {
     }
 }
 
-/* Theme video styling rolled back because jellyfin does not differentiate between the main video player and theme video playback nicely*/
+body:not(.hide-scroll) > .videoPlayerContainer {
-/* .videoPlayerContainer {
     position: relative !important;
-    -webkit-mask: var(--themeVideoPlayerMask);
+    -webkit-mask: var(--headerBlurMask);
-    mask: var(--themeVideoPlayerMask);
+    mask: var(--headerBlurMask);
-    height: 90vh;
+    height: 80vh;
 }
 
-.layout-mobile .videoPlayerContainer {
+.layout-mobile body:not(.hide-scroll) > .videoPlayerContainer {
+    height: 40vh;
     z-index: 1;
-    height: 35vh;
 }
 
-.videoPlayerContainer>.htmlvideoplayer {
+.layout-desktop > body:not(.hide-scroll) > .videoPlayerContainer ~ #reactRoot > .backgroundContainer.withBackdrop {
-    width: -webkit-fill-available;
+    opacity: 0.25;
-    object-fit: cover;
+}
-} */
 
 .itemBackdrop {
     display: block !important;
@@ -4077,13 +4075,14 @@ ul.MuiList-root.MuiMenu-list.MuiList-dense > div:first-child {
     container-name: skinHeader;
     container-type: size;
     height: var(--appBarHeight);
-    max-height: var(--appBarHeight);
     position: sticky;
     top: 0;
     z-index: 1099;
 }
 
 .touch-menu-la {
+    height: 100vh;
+    height: 100dvh;
     z-index: 1099;
 }