Image blanks out to black

[eatingApple]

I have developed a component Hero which has two html tags picture and video, from dialog author can provide image path or video path through radio button option.

Facing issue of image not getting loading (shows loading partially and very next second blanks out with black screen)

1. Author drops Hero component, edits dialog with image option - Image gets rendered properly.

2. Author drops Hero component in next parsys, edits dialog with the video option - Video gets rendered properly, but at the same time rendered image in step 1 blanks out to black screen

If any one faced this issue or someone understood this issue or someone needs more clarity on this scenario, please let me know how to fix it. I have searched so much on forums and helpx, analysed a lot finally posting question here.

Thanks

[smacdonald2008]

Place this component into a GOOGLE drive so the community can look at it. It will be too hard for the community to attempt to describe why your custom component is not working without looking at it and even loading it into a local AEM instance,

[eatingApple]

Hi SmacDonald,

Thank you for your suggestion, the component is developed on client machine, we don't have permission to upload anything.

[Ravi_Pampana]

Hi,

There might be some js which might be targeting same class as when you use same component twice on same page, the javascript will execute for both the components. Or if you are targeting Id then it will execute for first component.

Try checking your js/css if there are targeting any class or id

[eatingApple]

Hi Ravi,

I'm also guessing same, it could be js/css issue. Don't know either issue is because of custom component js or OOTB js. Yet to find root cause to this issue.

I tried with different images and video remains same scenario :

Scenario 1:

step1: First selected Image A, it gets rendered.

step2: In next parsys, selected video V1. Now, video rendered but whereas image A blanks out with black screen

Scenario 2:

step1: First selected image B, it gets rendered.

step2: In next parsys, selected Video V1. Now, Video and image B get's both gets rendered properly.

Also note these scenario tested for on multiple images, few are loading and few are not.

really, not finding an idea on this intermittent issue.

thank you for your comments

[Gaurav-Behl]

Is this issue browser specific?

HTML5 video has its own background color that is dependent on browser. That might be the issue

Otherwise, check if you have black background/backdrop on images/hero component/video player?

check if this is your issue:

Html5 video element background black and cannot be changed with css, as it works on Chrome. - Micros...

html - Change background-color of html5 video element - Stack Overflow