Answered

Black Embedded Iframe

  • 15 September 2022
  • 9 replies
  • 591 views

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

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!

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.

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>

 

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.
 

 

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.

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>

 

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 🙂

 

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!

Userlevel 7
Badge +5

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

Reply