Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Problem trying to show an iframe of a website that scales

I am trying to create a website that will show an iframe on the site, which has a panel at the side of it. The main thing that i need is for the iframe to render the website as if it was on a 1920px monitor, regardless of the resolution used by the website viewer. I have attached a few quick mockup images to try explain this, as you can see, when the user drags the window, the iframe site will shrink but keep the same proportions width wise, and scale out, so you can see more of the site at the bottom. Therfore if the user was using 1368×768 as you can see in the other mockup, they would still see how the website would be rendered at 1920px .

I apologise if this is confusing, i have been trying for the last 2 days, but i can never get it to constantly fill the container in which the iframe is in, there are always gaps, or it doesnt scale, or reverts to tablet/mobile versions, all of which i am trying to avoid.

Does anybody have any advice for me, any pointers in which I can try, really appreciate any help

How it should look on a 1920×1080 monitor

How it should look on a 1920×1080 monitor if shrunk in

How it should look on 1368×768 resolution

In terms of code i have tried so many things, the most "successful" is using js, this is what i did, but it didnt work as i liked.

function adjustIframeScale() {
if (iframe && container) {
    const containerWidth = container.getBoundingClientRect().width;
    const scale = (containerWidth * 2) / 1920;
    
    iframe.style.transform = `scale(${scale})`;
    iframe.style.transformOrigin = '0 0';
    
    container.style.height = `${1080 * scale}px`;
    
    // Log values for debugging
    console.log('Scale values:', {
        containerWidth,
        scale,
        scaledHeight: 1080 * scale
    });
}
Tags:

2

Answers


  1. 0

    You could use the zoom CSS property on the iframe.

    You can try the following snippet by clicking on "Run snippet", "Full page" and then resizing your window:

    const $iframe = document.querySelector('iframe');

addEventListener('load', updateIframeScale);
addEventListener('resize', updateIframeScale);

function updateIframeScale() {
  const width = $iframe.getBoundingClientRect().width;
  const zoom = width / 1920;
  $iframe.style.setProperty('--zoom', zoom);
}
    iframe {
  --zoom: 1;
  display: block;
  width: 100%;
  height: calc(90vh / var(--zoom));
  zoom: var(--zoom);
}
    <iframe src="https://example.com/"></iframe>
    Login or Signup to reply.
  2. 0

    I like the answer by @blex, but on my Mac it only works in Chrome, not in Safari or Firefox. I have come up with this solution based on both his answer and this excellent answer by @MrP01. It uses transform: scale() instead of zoom. This works on all browsers on my Mac.

    const i = document.querySelector('iframe')

function updateScale() {
  const width = i.getBoundingClientRect().width;
  const zoom = width / 1920;
  const inversePercentage = 1 / zoom * 100;
  i.style.setProperty('--zoom', zoom);
  i.style.setProperty('--inversePercentage', inversePercentage + '%');
}

addEventListener('load', updateScale);
addEventListener('resize', updateScale);
    body {
  display: flex;
  height: 300px;
}

.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

iframe {
  --zoom: 1;
  --inversePercentage: 100%;
  border: 0;
  width: var(--inversePercentage);
  height: var(--inversePercentage);
  transform: scale(var(--zoom));
  transform-origin: 0 0;
}

.sidebar {
  width: 200px;
  height: 100%;
  background: pink;
}
    <div class="wrap">
  <iframe src="https://example.com/"></iframe>
</div>
<div class="sidebar"></div>

    After you run this snippet, use the full page link to test the responsive behaviour.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search