How to apply CSS filter to video without affecting controls in HTML5? - html

Question

If I apply a CSS filter to a video element, for example:
video:first-child {
filter: brightness(40%);
}
<video controls></video> vs.
<video controls></video>
Then I find that the same effect applies to the media controls UI that the browser provides (via controls attribute on the video tag).
Are there any techniques that allow for applying the filter to the video content without the controls being affected?

Answer 1

Don't think this is possible, but you could make your own play/pause buttons etc using javascript, then style the video? Like below:-
(function (window, document, $, undefined) {
'use strict';
$(document).ready(function () {
$('#play').on('click', function(){
$('.my-video')[0].play();
});
$('#stop').on('click', function(){
$('.my-video')[0].pause();
});
});
})(window, document, jQuery);
video {
border: 10px solid green !important;
opacity: 0.6;
box-shadow: 12px 9px 13px rgba(255, 0, 255, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video width="320" height="240" class="my-video">
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<button type="button" id="play">Play</button>
<button type="button" id="stop">Stop</button>