Answered

Black Embedded Iframe

  • 15 September 2022
  • 9 replies
  • 495 views
Ben Walsh
Userlevel 1
Badge

Hey community I just dropped my VideoAsk flow onto my homepage - but in the iframe the video element is blocking the image in Chrome and Safari, and as it has a black background.

https://darkside.ltd

Looks like it’s some sort of CSS bug.

Now I’ve run into problems like this before by using meta colour-scheme for native darkmode UI components.

<meta name="color-scheme" content="dark light">

So I removed it.


No idea what it could be, totally ruins the whole thing. 

icon

Best answer by Ben Walsh 16 September 2022, 12:29

View original

9 replies

andrew_videoask
Rank
Userlevel 7
Badge +5

Hi @Ben Walsh, thanks for flagging this!

Can you please share the exact code snippet you pasted into your website? I’ll try to reproduce the bug.

Thanks in advance!

If you can dream it, you can do it!
andrew_videoask
Rank
Userlevel 7
Badge +5

@Ben Walsh I wasn’t able to reproduce this issue with my own videoask, but I was able to reproduce it using your videoask.

It looks like your videoask starts off with a black frame, so I think VideoAsk is pulling that as the thumbnail (which displays when the videoask is paused).

To solve this issue, I’d recommend re-rerecording that step or your videoask or trimming away the black frame.

If you can dream it, you can do it!
Ben Walsh
Userlevel 1
Badge

Hi @Ben Walsh, thanks for flagging this!

Can you please share the exact code snippet you pasted into your website? I’ll try to reproduce the bug.

Thanks in advance!

<iframe src="https://www.videoask.com/ffrlhk24y"
                class="hide-d"
                allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"
                width="100%"
                height="600px"
                style="border: none; border-radius: 16px"
                >
                </iframe>

 

Ben Walsh
Userlevel 1
Badge

@Ben Walsh I wasn’t able to reproduce this issue with my own videoask, but I was able to reproduce it using your videoask.

It looks like your videoask starts off with a black frame, so I think VideoAsk is pulling that as the thumbnail (which displays when the videoask is paused).

To solve this issue, I’d recommend re-rerecording that step or your videoask or trimming away the black frame.

Nope it’s not that… I can move the video element out of the way by removing position:absolute. You can see the still image underneath. There’s nothing wrong with my video.
 

 

Ben Walsh
Userlevel 1
Badge

@Ben Walsh I wasn’t able to reproduce this issue with my own videoask, but I was able to reproduce it using your videoask.

It looks like your videoask starts off with a black frame, so I think VideoAsk is pulling that as the thumbnail (which displays when the videoask is paused).

To solve this issue, I’d recommend re-rerecording that step or your videoask or trimming away the black frame.

Nope it’s not that… I can move the video element out of the way by removing position:absolute. You can see the still image underneath. There’s nothing wrong with my video.
 

 

Unless the still image and video use different frames? which would be weird.

Ben Walsh
Userlevel 1
Badge

@Ben Walsh I wasn’t able to reproduce this issue with my own videoask, but I was able to reproduce it using your videoask.

It looks like your videoask starts off with a black frame, so I think VideoAsk is pulling that as the thumbnail (which displays when the videoask is paused).

To solve this issue, I’d recommend re-rerecording that step or your videoask or trimming away the black frame.

Nope it’s not that… I can move the video element out of the way by removing position:absolute. You can see the still image underneath. There’s nothing wrong with my video.
 

 

Unless the still image and video use different frames? which would be weird.

Okay so hands up, there way a black frame - cheers Loom! Fixed that in iMovie - but I still don’t see the video preview moving at all. :( here it is side by side with Chris Do’s one on my homepage.
 

iframe settings are the same:

<iframe src="https://www.videoask.com/ffrlhk24y"

                allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;"
                width="100%"
                height="100%"
                style="border: none; border-radius: 16px"
                >
                </iframe>

                <iframe src="https://www.videoask.com/f0dkx1kpz" 
                allow="camera *; microphone *; autoplay *; encrypted-media *; fullscreen *; display-capture *;" 
                width="100%" 
                height="100%" 
                style="border: none; border-radius: 24px">
</iframe>

 

andrew_videoask
Rank
Userlevel 7
Badge +5

Hi @Ben Walsh, glad to hear that we found the culprit!

As far as the video not automatically playing, is the “pause autoplay” feature enabled in your videoask settings? If so, toggle it off (see screenshot below) and that should fix things 🙂

 

If you can dream it, you can do it!
Ben Walsh
Userlevel 1
Badge

Hi @Ben Walsh, glad to hear that we found the culprit!

As far as the video not automatically playing, is the “pause autoplay” feature enabled in your videoask settings? If so, toggle it off (see screenshot below) and that should fix things 🙂

 

Legend! Yep, that was turned on. Thanks for you help Andrew!

andrew_videoask
Rank
Userlevel 7
Badge +5

@Ben Walsh Woohoo! Have a great Friday and weekend ahead 🎉

If you can dream it, you can do it!

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs