Force Desktop view in iframe with background image and responsive Design

Question

Thanks in Advance, I want to show the website in the iframe with background-image,

and Responsive.i'm trying with this CSS but works for force desktop view but not responsive.

check this snippet.

I got the desktop view but not responsive

 
  div.laptop-wrapper {
      position: relative;
      padding-top: 25px;
      padding-bottom: 65.5%;
      height: 0;
  }
  div.laptop-wrapper iframe {
      box-sizing: border-box;
      background: url(https://i.stack.imgur.com/zZNgk.png) center center no-repeat;
      background-size: contain;
      padding: 11.9% 15.5% 14.8%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }

  .frame {
      width: 1080px;
      height: 786px;
      border: 0;
      -ms-transform: scale(0.25);
      -moz-transform: scale(0.25);
      -o-transform: scale(0.25);
      -webkit-transform: scale(0.25);
      transform: scale(0.5);
      
      -ms-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-6">
     <div class="laptop-wrapper">
        <iframe class="frame" src="https://laravel.com/"></iframe>
    </div>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-6">
      <div class="laptop-wrapper">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/9No-FiEInLA" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</div>
<h1 class="text-center">I want like this but it's not responsive, i need responsive </h1>
<div class="laptop-wrapper">
    <iframe class="frame" src="https://laravel.com/"></iframe>
</div>

score 1 · Answer 1 · answered Mar 29 '19 at 21:50

The "request desktop" option in most browsers works by altering the user-agent header, as described here. To view an iframe in "desktop mode" you would have to send a header that is different from the default browser setting, and unfortunately according to this question that is not possible. However what you can try is to use AJAX, a more detailed description and example is given at the aforementioned question.

Hopefully you can do something with this.

Force Desktop view in iframe with background image and responsive Design

1 Answers1