CODEWITHSUNDEEP
phphtmlcssvideohtml5-video
Manikandan Vijayakumar
Manikandan Vijayakumar

Reputation: 115

html5 video player remove black shadow at bottom of controls section

Hi,

I have an HTML 5 Video Player on my website. Whenever I click pause or hover the video the strange black shadow appears. It's overlaying the control section. How can I get rid of that. I tried to search solution for this, but I couldn't find the solution. Please help me with this.

black-shadow-image

Upvotes: 3

Views: 7370

Answers (3)

Chandra Ganegoda
Chandra Ganegoda

Reputation: 31

This is the code that worked for me, try.

    video::-webkit-media-controls-panel {
         background-image: linear-gradient(transparent, transparent) !important;
    }

Upvotes: 3

eaglebearer
eaglebearer

Reputation: 2448

The webkit pseudo element for video control panel is 

video::-webkit-media-controls-panel

To set or update this element you just add this css

video::-webkit-media-controls-panel {
  // Your styling here
  background-image: linear-gradient(transparent, transparent) !important; //Transparent for your case

}

Also, make sure you mark your styling as important. A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

Refer more on this gist

Upvotes: 7

Urek Mazino
Urek Mazino

Reputation: 138

You can try to add css like this

video::-webkit-media-controls-panel {
   background-color: transparent !important;
   box-shadow: none !important
}

You could also use other pseudo in css to control the native video like

video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-volume-slider {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display {}

Upvotes: 1

Related Questions