diff --git a/src/blocks/Media/__stories__/data.json b/src/blocks/Media/__stories__/data.json index 09a99f5d0..c5c9cd07f 100644 --- a/src/blocks/Media/__stories__/data.json +++ b/src/blocks/Media/__stories__/data.json @@ -131,7 +131,6 @@ "customControlsOptions": { "type": "with-play-pause-button", "muteButtonShown": false, - "backgroundShadowHidden": true, "positioning": "left" }, "muted": true, @@ -154,7 +153,6 @@ "customControlsOptions": { "type": "with-play-pause-button", "muteButtonShown": false, - "backgroundShadowHidden": true, "positioning": "left" }, "muted": true, diff --git a/src/components/ReactPlayer/CustomBarControls.scss b/src/components/ReactPlayer/CustomBarControls.scss index 5393c3f4b..994f90571 100644 --- a/src/components/ReactPlayer/CustomBarControls.scss +++ b/src/components/ReactPlayer/CustomBarControls.scss @@ -16,6 +16,7 @@ $withMuteControlWidth: 32px; bottom: 0; opacity: 0; transition: opacity $animationDuration ease 3s; + z-index: 1; &_shown { opacity: 1; diff --git a/src/components/ReactPlayer/ReactPlayer.tsx b/src/components/ReactPlayer/ReactPlayer.tsx index 5014b8abc..f5b2e6ad2 100644 --- a/src/components/ReactPlayer/ReactPlayer.tsx +++ b/src/components/ReactPlayer/ReactPlayer.tsx @@ -115,7 +115,7 @@ export const ReactPlayerBlock = React.forwardRef(false); const [isMounted, setIsMounted] = useState(false); - const [hovered, setHovered] = useState(false); + const [hovered, setHovered] = useState(isMobile); useMount(() => setIsMounted(true)); @@ -391,6 +391,15 @@ export const ReactPlayerBlock = React.forwardRef {controls === MediaVideoControlsType.Custom && (