1

I have a full screen video , example: http://jsfiddle.net/z563brct/1/

I am using the transform:translate so that the video is always centered in the screen.

The problem comes with the video edges, they are fading as you can see and not strong defined.

How can i mantain all but define or hide the edges?

4
  • Interesting.. It looks like the problem only applies to video and not, say, images. I tried several workarounds (clip-path, negative margins with calc(100% - 12px) width/height...) but none of them seemed to help. I'm betting this has something to do with how the browser handles video surface rendering.
    – thykka
    Sep 20, 2015 at 14:24
  • @thykka maybe the problem is that the video is position:fixed? i also tried scaling the video and put edges uder the window edges but nothing :/
    – itsme
    Sep 21, 2015 at 9:31
  • @sbaaang I also tried with position: absolute; and to place the video within another container. Didn't help at all. I'm guessing the browser only renders the visible area of the video, and anything that gets clipped out is discarded. Thus, when the blur filter attempts to blur the video, the overflowing parts are discarded, causing them to appear white in the filtered result. We'd need an option to repeat edge pixels with the blur filter to prevent this. Have you tried setting a background color to the video element? Although it won't fix the problem, it might make it less visible...
    – thykka
    Sep 22, 2015 at 10:33
  • @thykka yeah looks exactly like the browser takes only visible parts for blur :/
    – itsme
    Sep 22, 2015 at 15:33

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.