Skip to main content

IFRAME HIGH issue

Enrico Cristaldi

Hi, I get this issue when I embed

 <iframe width=100% height=100% ......

Width works fine (if I switch 50% works and so on) but I can't find a way to get the height automatically switched to the embedded page height.

The only way to get it is to set height in pixels, but embedded page height will vary during time.

Any fix ?

0

Comments

11 comments

Date Votes
  • Ariel H.

    Hi Enrico,

    Thank you for contacting us.

    Please try the solution described on this article:
    https://www.tutorialrepublic.com/faq/how-to-create-a-full-screen-iframe-with-100-percent-height.php

    I hope this helps.

    Best regards,
    Ariel H.

    0
  • Enrico Cristaldi

    Hi, thanks, I've applied but unfortunately doesn't work properly. 

    What I get is ALMOST well, but not complete and still with navigation bar on right side.

    Check this (I made 2 Iframes with same content, one is full width, the other one is column):

    https://bookingdiscount.it/testiframe/

    I give you login password to check:

     

     

     

    0
  • Ariel H.

    Hi Enrico,

    Thank you for the update.

    Unfortunately, this will require custom code, which is beyond the scope of our support.  

    While we can offer suggestions to address the issue, we cannot guarantee that these suggestions will work seamlessly on your website, as we do not have control over the development and functionality of the custom code that you are trying to embed into this page.

    To ensure the best implementation, we suggest reaching out to the developers of the iframe code that you're attempting to embed. They will be able to provide guidance on how to integrate their code properly within a page builder environment like Brizy.

    Sorry for the inconvenience.

    Best regards,
    Ariel H.

    0
  • Enrico Cristaldi

    No, this is is not about my custom code, is about your LACK OF SUPPORT !

    This is a super-simple BRIZY TEST PAGE, not a complex site.

    I've updated the website inside the iframe with a new one, nothing changes:

    https://bookingdiscount.it/testiframe/

    I'm the developer and the Iframe is made with just and only the code as for your suggestion, so what's wrong?

    You have password to inspect it.

    If you don't have the skills to answer this kind of question, switch the issue to sameone else more skilled, instead of answer nonsenses.

    0
  • KC George

    Hi Enrico,

    We apologize that we can't offer support for custom coding. If you have any questions about the Brizy products, please let us know. We will be happy to help.

    0
  • Enrico Cristaldi

    Please, if my IFRAME is a custom coding,

    could you show any of YOURS working sample page with IFRAME full working code ?

    Am I the only one with this issue ?

    0
  • Ariel H.

    Hi Enrico,

    Thank you for the update.

    Brizy is designed to calculate the size of elements like columns, buttons, images, etc. However, when embedding an external website in an <iframe>, Brizy cannot determine the website's height and adjust the block size accordingly. To resolve this, I created a screencast for you: https://youtu.be/pafdWqSjXyc

    HTML Code in the embed element:


    <iframe src="https://baroncella-saturnia.it/"></iframe>

    The CSS:

    iframe {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

    This was tested on this link:  https://staging.server001.xyz/test02/iframe

    Best regards,
    Ariel H.

     

    0
  • Enrico Cristaldi

    Hi Ariel, first of all, I apologize for what I said before, now you've done really a great work, that's Brizy's assistance I've known in these years.

    I use Brizy on almost all my sites and I refer for it to collegues, so it was sounding strange to me you were abandoning me.

    So thanks, it works; however if possible I've still something about this issue to fix in real development enviroment, as I did the example page I sent to you for testing purpose and to show it to you.

    However in real development what happens is that an Iframe is put inside a page, I mean with some block upon and some bottom, like in this updated sample:

    https://bookingdiscount.it/testiframe/

    in this page I've set yout coding and CSS but just changing POSITION in RELATIVE because if I set it to FIXED the first block will not visible

    I've tried to switch POSITION to STATIC/RELATIVE/ABSOLUTE/STICKY but nothing between these works well; FIXED works but first block disappears

    Is there any way to get it working? I mean to get a page made with:

    BLOCK 1 ( BLOCK 2...)

    IFRAME in FULL HEIGHT

    BLOCK3 ( BLOCK4...)

     

    Thanks, best regards

    Enrico

    0
  • Ariel H.

    Hi Enrico,

    Thank you for the update.

    The only way I found to make this work is to set the iframe with a fixed height.
    I did not use your testing environment because I have no access to delete the CSS we previously added in the customizer. Please delete it before using this new code.

    Screencast:  https://youtu.be/gC2vy3XJBdc

    CSS/HTML:

    <style>
      .container1, iframe {
        float: left;
        height: 3700px; /* This is the height your website, you may change it as needed */
        overflow: hidden;
      }

      #mainFrame {
        width: 100%;
        position: absolute;
        height: 100%; 
        border: none;
        overflow: hidden;
      }
      

    </style>
    <div class="container1">
        <iframe src="https://webspot.media" id="mainFrame" name="mainFrame">
    </div>

     

    In the above example, I used a different website just to show you that it works.
     
    If you change this with your website URL, the layout breaks because Cross-Origin Resource Sharing (CORS) headers are set not to allow access - https://prnt.sc/x9KNy97eD_iJ
    You will need to contact your hosting provider to allow this.
     
    This issue is best explained in this article:
     

    We would like to clarify that we do not typically provide custom code solutions. Our expertise lies in offering general guidance and assistance rather than writing custom code, and the above CSS/HTML may require some modifications. If necessary, please review the code and make any necessary adjustments to fit your website.

    Best regards,
    Ariel H.
    0
  • Enrico Cristaldi

    Hi Ariel,
    thank you again for your support.

    I was aware of this kind of solution (declaring target website's height)
    and was exactly what I was seeking to avoid,
    as there are some sites to embed that often vary in height;
    of course I know CORS too.

    I was wondering if is there is any kind of height/css to set to Brizy's block
    to make automatically accept iframe's height.

    If is there any workaround to make Brizy's parent block responsive to Iframe,
    I think that could interest and help many people, not only me.

    If may be useful I've also switched your login to ADMIN on my site.

    Best regards.

    Enrico

    0
  • Ariel H.

    Hi Enrico,

    I am not aware of a height/css to set to Brizy's block. I also tried to add an ID to the blocks and experimented with CSS and JavaScript to adjust the height, but not successful.

    However, if I come across a better approach to achieving this, I will be sure to inform you.

    Best regards,
    Ariel H.

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question