iFrame not showing

Hi
I am trying to use Anvil to make some on-boarding page demos for a video-identification web platform we have at work.
I need to use the iFrame technique in order to demonstrate the client-side callback, but I can’t see the platform loaded into the iFrame
What happens is:

  1. Anvil’s App Form collects video-identification data and builds the url that will start the video-identification session. Actually if you put this url in a new browser tab, it works flawlessly.
  2. I open a second Anvil’s form, which is a custom html component. This component is very very simple: it’s a blank page with the iFrame and the javascript callback. On Anvil form show method I call the javascript function to update the iFrame’s URL
  3. I am asked to allow for audio/video and geolocation and after that, nothing is shown.

Nevertheless if I inspect the element with Developers Tools I can see the iFrame is loaded with the right content, so I am wondering why it is not displayed.

Here’s a simple CopyApp link.

https://anvil.works/build#clone:2T25SKGCGLMBUCLL=2LA3YAOA4CRKC4XTFWAHWIXI

It starts straight from point 2, the url is hardcoded.
To experiment with it, it is necessary to use at least the private sharing URL.
In fact, simply “pressing Play” in Anvil’s IDE won’t even ask for the audio/video/geolocation permissions and the video-identification platform loaded into the iFrame will fail with a Geolocation: permission denied error shown in Developer Tools console.
On the contrary, starting it from the private sharing url, the console will show a neat:

But nothing shows up.

Can someone help?

Thanks

Is it just because you have display set to none?

OOoooohhhhhuuccchh!!
:blush:
I feel so ashamed…
…thanks Stu!

1 Like

Worth noting that there’s a nice anvil component for iframe embedding.

And in the library