videohtml5-videomediacontroller

Removing gradient from video

I'd like to get rid of the color gradient at the bottom of a video file (media controller gradient). Applying transparent background does not help. Thanks!

<div class="video-container">
<video controls="controls" width="500"                      
name="Idea" src="https://www.vidsplay.com/wp-content/uploads/2017/05/ideas.mp4?_=1">
</video>
</div>



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

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

https://jsfiddle.net/e8q6bL3f/1

Solution

  • Each browser impelements its own video control and unfortunately Google has decided that its Chrome needs to add a gradient. You can turn it off by using setting background image to none

    JS Fiddle: https://jsfiddle.net/z906whne/

    video::-webkit-media-controls-panel {
   background-image: none !important;
   filter: brightness(0.4);
}