I notice that the video gets a tad darker when I view them on mobile devices.
I don’t understand why is it that on on iPads and iPhones my videos get slightly darker, but not on my Macbook. I’m aiming for a clean aesthetic and this weird color shift is really bothering me Everything looks fine desktop and editor, and I’m also using sRGB color space.
I can try to do a hacky thing where I just change the color to match the weird change on mobile, but if I do that the iPad view which currently display laptop site would also be messed up.
Hi @Supawat_Vitoorapakor color difference can probably have something to do with your display color calibration or setting on your iOS devices. As you can see in my video I do not see any difference/change in color.
Hi Stan,
Thank you for your reply. The drop shadow is part of the video though, and hence that’s why there’s a problem. I made this visual from your video to illustrate my point:
The dotted white box is the whole video, and it’s being scaled accordingly as element so there is no overflow issue. I am starting to suspect that this might be: a compression/playback issue happening in the AWS server that Webflow/Vimeo use to host the file when played backed on mobile devices.
I uploaded the video on Vimeo to see if there’s any color alterations, and sure enough it’s almost the exact same color alteration that’s happening on mobile devices:
I know that faking transparency isn’t how one should use a video or background video element in Webflow, so if there’s any suggestion aesthetically about how I can accomplish a similar layout that would also be appreciated. Seems like this is a technological problem that isn’t solvable by a designer or Webflow.
Hi @Supawat_Vitoorapakor sorry I didn’t realised you asking for drop shadow and this effect is baked into video here only how you may solve problem with standard drop shadow.
EDIT: I have now copied your video to my tests project to see what the video is look like and you have baked in the color it self. Now I know what you trying to achieve but as I never used video this way I’m afraid that I have no solution for you.
As your problem is not related to WF I have find something you can try and further investigate on your own. It is an old article but it may clear some aspects why this happening and how you may or not to solve it. You can find some other articles that have similar content on web.
Thank you very much for taking the time to figure this out with me. I sincerely appreciate it.
And yes, I agree with you after much headache and research this seems to be how different browsers and devices decode and display video. There’s really not much we can do about it.
On the other hand I’ve discover 3 nifty optical solution:
1. Create a faded mask with inner shadow around the device to blend the background color.
The black in this case would be the background color just faded into the video element.
Pro: Easy and very effective on almost all device. Con: Doesn’t work as well for non square shapes. Occasionally breaks down still, but does a good enough job visually.
2. Calculate the color difference on specific device and compensate for that by applying a filter on that specific device/browser.
Pro: Works well on the targeted device Con: Takes a lot of time to create filters for each specific browser and device
3. Convert the video to a .gif, accept that the colors and frame rate would be distorted, and style the background color accordingly. Pro: Fast and simple solution Con: Only works for really short video; visual quality is reduced a little
Hi @Supawat_Vitoorapakor there is another way how to solve this but I didn’t mentioned it as your video have everything baked in (bg-color and shadow). You can use mobile frame as image with transparent inside. and place your video inside. This stripe down problem with bg color matching and allow you to to create box shadow (on frame). This will be IMO the simplest way I can thing now but it will need new video of only mobile screen
hahaha yes! That would be the best long term solution. For now, since this is such an old project I honestly have no clue where the original video file is without the device and shadow baked in.
Everything looks fine desktop and editor, and I’m also using sRGB color space.
