Can't Insert iFrame in an App Embed Block

[myobs]

Hi! I have a question about using iframes in app embed blocks in a theme extension app. I created an app embed block with an <iframe> tag and some css styling in a <style> tag. It's supposed to be like a modal that overlays the way a dialog box would. But, for some reason it never displays in the test store (on firefox or brave). The weird part is that if I put some other <div> tag with some text in the app embed bloc .liquid file it does show up on the store. It's just the iframe. Does anyone know might cause this? Are iframes not allowed as app embed blocks? It's a simple piece of code:

<iframe  id="iframe-modal" class="iframeStyling" src="<the-url-to-a-hosted-page>"  allow="clipboard-read; clipboard-write"></iframe> 

<style>
.iframeStyling{
        width: 60vw;
        height:60vh;
        margin-left: 20vw;   
        overflow: hidden;
        border-radius: 25px;
        border-color:black;
        border: 0.1rem;
        border-style: solid;
        z-index: 100;
        position: fixed;
        margin-top: 0vh;
      }
      @media (min-width: 1024px) {
        .iframeStyling{
          margin-left: 30vw;
          width: 40vw;
        }
     }
</style>

{% schema %}
  {
    "name": "modal-widget",
    "target": "body",
    "settings": []
  }
{% endschema %}

Another weird thing which might be unrelated -- sometimes it doesn't even show up on the console if I do document.getElementById("iframe-modal") . Refreshing the page may fix it but it's a 50/50 chance. There's some sort of randomness there that I dont' understand. That could be a separate issue?

[PageFly-Amelia · Accepted solution]

Hello @myobs 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

The issue was that the url in the iframe was an http link and not an https link. I had to also change some css

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly