How to force responsive iframe target to respect viewport of iframe and behave responsively as if it were being accessed directly?

Question

The following site is fully responsive when accessed directly:

https://prosolutionplus.com/

However, when accessed through an iframe, its responsiveness misbehaves and does not conform to the width of the browser:

iframe {
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     }

<div class="iframeContainer">
   <iframe src="https://prosolutionplus.com/">
   </iframe>
</div>

https://jsfiddle.net/g2eupd80/

I've tried every iframe responsive solution I could find (including the one above that actually works with other responsive sites), but nothing worked on this particular site. I noticed that when accessed via an iframe, the target site is setting a width of 1093px, but it does not do that when accessed directly and is then resized, so that's probably why the different solutions I've tried are not working. In other words, the target site is behaving differently depending on whether it is being accessed by the browser directly or via an iframe.

For it to be doing that, the target site is obviously detecting something differently when accessed via an iframe than it does when accessed directly, I just don't know what that is.

How can I fix this so that the iframe is treated just like a browser so that the target site behaves responsively within the iframe?

Compare the above JSFiddle example which is responsive when accessed directly but NOT when accessed via an iframe, to the example below which is responsive when accessed both directly and via an iframe. The only difference in the code is the URL.

iframe {
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     }

<div class="iframeContainer">
   <iframe src="https://www.vigrxplus.com/">
   </iframe>
</div>

https://jsfiddle.net/phL2nt34/

Answer 1

This is a CORS issue on prosolutionplus.com. If you open up the site in its own small tab, and turn JavaScript Off, you'll notice it sets the same 1093px, and behaves like it does when being iframed.

If you open up the JavaScript console while iframing prosolutionplus.com, you'll notice a CORS error pops up, stating:

frontend.min.js?ver=2.4.5.1:5 Uncaught DOMException: Blocked a frame with origin "https://www.prosolutionplus.com" from accessing a cross-origin frame.`

Looks like this issue is caused by the Thrive Editor. Also, here's a quick SO read on Cross-Origin and why it's blocked: SecurityError: Blocked a frame with origin from accessing a cross-origin frame