How to create a fullscreen iframe using css

If you want to create a fullscreen <iframe>, then, this article is for you. <iframe> is a very convenient way to display an external content on your webpage. So, In this article, you will learn how to create a responsive iframe without scroll bar in css.

iframe{
      position: fixed;
      background: #000;
      border:none;
      top: 0; right: 0;
      bottom: 0; left: 0;
      width: 100%;
      height: 100%;
  }

In the above example, I have created a fixed iframe with the position property. So that the iframe always stays in the same place even if the page is scrolled.

Now in this example, I'm going to show you how to make a iframe full screen whenever users will click a button.

 <iframe class="iframe" src="https://app.3schools.in"> 
 </iframe> 

 <button onclick="fullScreen()">Make Full Screen
 </button>