Video Overlays in CSS

Ajfunky

Hey folks,

Currently devoloping a site for my company alongside a web dev company who are doing most of the project for us. We had requested a certain feature be implemetned and we were told it couldnt be done, but I wanted to check with further communities!

Basically our branding entails using High quality imagery, with a a portion of the picture in black and white, and then a coloured overlay on the same portion with a 'multiply' blend. We use this across a variety of images, and what we wanted to do was apply this to a timelapse. We were given the following response. :

"if you could send across an example time-lapse video (raw format) so we can look into the cost of creating a multiple overlay effect for each video in Aftereffects. This is the only way to achieve the effect you are looking for, as speaking with the developers the effect used on T3 in the code is a simple overlay. Whereas the effect you are looking for is a multiply (which can't be achieved in CSS) and only applies to a certain area of the video."

I felt like this was not the best way forward, also meaning we would have to edit every video before uploading as opposed to just uploading and having the filters in place. Ive attached a link to a type of video and an image example. Any help or guidance would be appreciated!

http://www.shutterstock.com/video/clip-7374595-stock-footage-glasgow-scotland-circa-october-clyde-arc-bridge-crossing-the-river-clyde-circa-october.html?src=search/HlqoYMID0JjNphHAi0cIdg:1:2/3p

Giblet

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

It doesn't have a lot of support, but it might be enough. It seems to work fine with videos, but can be tricky to customize.

https://jsfiddle.net/ob5pcu3j/

Can apply to any element, and also to both elements to get a mix of blends.

devildriver

You might be able to use a combination of Giblets solution above and Cloudinary's on-demand video and image manipulations.

http://cloudinary.com/documentation/video_manipulation_and_delivery#adding_image_overlays

All of these effects can be controlled by url parameters so this is something you could build in to your CMS to allow some flexibility for editors when uploading content.