Streaming live at 10am (PST)

Bug with background video - Flickering on Chrome


#1

I was about to official launch my new portfolio website which i have spent a long time crafting and have noticed a bug with the background videos on the home page! I have 3 sections that use them and all of them have the same flickering issue

They seems to lighten and flicker when the user rolls over them
These blocks have to link into the project, so the entire div collection is contained within a link block

I am a designer not a coder, so a lot has been a learning curve - so close to the finish line!
here is my site, I am hoping to tell my networks about it on Monday

Can you please help me!


#2

Hi @nickvandermolen

It looks like you are using some custom code for those bg videos. I recommend using the prebuilt background video component instead. When using custom code we cannot guarantee it will work as expected.

The site is looking great! :slight_smile:


#3

Hey Brando thank you for getting back to me
It is actually using the background video component (the live site)
and i thought that was the issue so tried to redo with html video player embed
but it was having the exact same problem

It seems to be some conflict within the nesting - when i took them out of the nest they do not seem to flicker

I will try tonight to simplify the nesting and see if it works

Cheers


#4


#5

Have done some testing and there is nothing conflicting with divs nested etc
I have taken the background video out of all containers and put just under the body and the same error occurs - so there is something wrong with the component or my video codecs?
I have rendered all my videos out of after effects as H264 - the run them through Miro Video Converter
to make the mp4
I have also test with mov straight out of after effects - H264 - and they have all had the same outcome

Can you please take a look and see ??

https://preview.webflow.com/preview/nv-2016-new-website-5b052c7900a2385f7c2?preview=053e33c42d16e8ee451eaddbfc9782c8

Let me know if you need anything else

Thanks


#6

Hi @nickvandermolen

Thanks so much for testing this on your end.

I was able to see the issue on this end as well and reported it to the team.

We are definitely working on it - hoping to have a resolution as soon as possible!

Please keep the feedback coming - we read and log every update so if you run into more strange behavior, please let me know. I will post back here when I have more information.


#7

In the mean time is there another way for me to work around this? I need to launch this site on my networks soon.

Can this video effect be achieved another way?


#8

Ok i have done further testing and there is nothing clashing or anything wrong my my videos
I have tested videos from reknowned web video background places
different codecs and formats - the problem does not seem to be anything i have done

It works fine on all other browser, safari, firefox, IE - Even chrome on PC

I need you to escalate this problem


#9

So I pulled apart my entire site to try and isolate the problem removing components one by one until it started working - only to have the issue when i down to the complete bare bones of the site

I then stumbled onto "a solution" i am sure there is still an issue - maybe with the component itself
but when i added a saturation filter onto the element (just 5%) it made the video look nice and dense and fixed the flickering!! So was very fortunate to find this solution - but like a said it is a bit of a patch / workaround - but worked for me!


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.