Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Image blanks out to black

Avatar

Avatar
Level 1
eatingApple
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
eatingApple
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
View profile
eatingApple
Level 1

16-04-2019

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

Replies

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

16-04-2019

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,

Avatar

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

192 likes

Total Posts

243 posts

Correct Reply

75 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile

Avatar
Establish
MVP
Ravi_Pampana
MVP

Likes

192 likes

Total Posts

243 posts

Correct Reply

75 solutions
Top badges earned
Establish
Contributor
Shape 1
Ignite 5
Ignite 3
View profile
Ravi_Pampana
MVP

16-04-2019

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

Avatar

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct Reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile

Avatar
Boost 250
MVP
Gaurav-Behl
MVP

Likes

250 likes

Total Posts

1,147 posts

Correct Reply

283 solutions
Top badges earned
Boost 250
Establish
Give back 300
Give Back 50
Give Back 5
View profile
Gaurav-Behl
MVP

16-04-2019

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

Avatar

Avatar
Level 1
eatingApple
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
eatingApple
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
View profile
eatingApple
Level 1

17-04-2019

Hi SmacDonald,

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

Avatar

Avatar
Level 1
eatingApple
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
eatingApple
Level 1

Likes

0 likes

Total Posts

3 posts

Correct Reply

0 solutions
View profile
eatingApple
Level 1

17-04-2019

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