Display full website within Iframe of certain size

Question

First time poster here.

In short I am trying to display a website within an Iframe. I want the iframe to display the full screen of the website. The only way I have managed to do this is by adjusting the size of the container.

Can I simply zoom out the iframe?

Hopefully I have explained myself clear enough.

.gridgames {
  height: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 10px;
  margin: 2rem;
}

.game {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 20rem;
  margin: auto;
  background-color: green;
  transition: 150ms;
}

.game:hover {
  transform: scale(1.1);
}

iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: hidden;
}

 <section class="gridgames">
      <div class="game"><iframe src="https://barneslow.com/"></iframe>​</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
      <div class="game">Sample Game</div>
    </section>

I attached some code to outline my problem.

Is it possible to "zoom out" on the iframe?

Answer 1

Use this:

transform:scale(0.5); //50% zoom

This simply zooms the whole iFrame out depending on scale value.

You may also need to change width and height as well as margins and positions.