Hi there, I'm looking to display a website in an iframe with a background image that is responsive. I've been working on it using this CSS code, but it only seems to work for the desktop view and not for responsiveness.
Check out this snippet below:
I managed to get the desktop view, but unfortunately, it's 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.sstatic.net/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 it to look like this but be responsive. Unfortunately, it's not responsive as needed.</h1>
<div class="laptop-wrapper">
<iframe class="frame" src="https://laravel.com/"></iframe>
</div>