CSS filter video but not the controls

Question

As is displayed here: http://codepen.io/chriscoyier/pen/zbakI you can apply a filter to videos using css filters.

You define the filter and then you refer to it later when applying it to the video element.

var blur_name='the_blur';
master_video.style.webkitFilter='url(#'+blur_name+')';
master_video.style.mozFilter='url(#'+blur_name+')';
master_video.style.filter='url(#'+blur_name+')';

var blur_name='';
master_video.style.webkitFilter='';
master_video.style.mozFilter='';
master_video.style.filter='';

But how can i get the filter to not blur the controls of the video?

Answer 1

To accomplish this, you will have to use custom video controls. There are lots of resources out there that explain how to implement them, for example this article.

I've edited a fiddle I found on Google to illustrate this:

http://fiddle.jshell.net/td8Lao79/

I am applying a simple filter: blur(4px); to the video element, but you can define your filters in HTML and refer to them by ID if you prefer.