fix: displaying video with fillWidthMedia param in HeaderBlock

Author: gorgeousvlad

src/blocks/Header/Header.scss

@@ -152,6 +152,16 @@ $backgroundWidth: 1440px;
             & > div {
                 max-width: none;
             }
+
+            #{$block}__background-media {
+                height: 100%;
+            }
+
+            video {
+                height: 100%;
+                width: 100%;
+                object-fit: cover;
+            }
         }
     }
 

src/blocks/Header/Header.tsx

@@ -27,6 +27,7 @@ const Background = ({background}: BackgroundProps) => {
     return headerHasMediaBackground(background) ? (
         <BackgroundMedia
             {...background}
+            mediaClassName={b('background-media')}
             className={b('background', {media: true, 'full-width-media': fullWidthMedia})}
         />
     ) : (

src/blocks/HeaderSlider/__stories__/data.json

@@ -41,6 +41,24 @@
             }
           ]
         },
+        {
+          "title": "Yandex Cloud Professionals Partner Program",
+          "description": "Sell Yandex.Cloud services and receive a monthly partner premium from 12% to 20% of your customers' consumption. Get grants to get acquainted with Yandex.Cloud services or to conduct pilot projects for your clients.",
+          "width": "s",
+          "background": {
+            "fullWidthMedia": true,
+            "fullWidth": true,
+            "disableCompress": true,
+            "height": 800,
+            "color": "lightgreen",
+            "image": "https://storage.cloud-preprod.yandex.net/aeksandla-test/img-scale.png",
+            "video": {
+              "src": [
+                "https://storage.yandexcloud.net/cloud-www-assets/scale/2022/main/scale_header.mp4"
+              ]
+            }
+          }
+        },
         {
           "title": "Yandex Scale",
           "overtitle": "September 24",

src/components/BackgroundMedia/BackgroundMedia.tsx

@@ -12,6 +12,7 @@ const b = block('BackgroundMedia');
 
 export interface FullProps extends MediaProps, Animatable {
     className?: string;
+    mediaClassName?: string;
 }
 
 const BackgroundMedia = ({
@@ -20,6 +21,7 @@ const BackgroundMedia = ({
     animated,
     parallax = true,
     video,
+    mediaClassName,
     ...props
 }: FullProps) => {
     const isMobile = useContext(MobileContext);
@@ -31,7 +33,7 @@ const BackgroundMedia = ({
             animate={animated}
         >
             <Media
-                className={b('media')}
+                className={b('media', mediaClassName)}
                 imageClassName={b('image')}
                 videoClassName={b('video')}
                 isBackground={true}