1

I have a webpage that I have set to have a landscape orientation on mobile devices within which I have placed an iframe. My problem is I cant get the iframe to fit within the mobile device screen while in landscape orientation (full width and height matching the device screen). How may I be able to achieve this?

I am using CSS:

<style>
   body, html {
     margin: 0;
     padding: 0;
     height: 100%;
     overflow: hidden;
   }

   #content {
     position:absolute;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0
   }

  #content iframe{
    width:100%;
    height:100%;
    border:none;
  }

  @media screen and (orientation:portrait) {
      body {
         -webkit-transform: rotate(-90deg);
         -webkit-transform-origin: 50% 50%;
         transform: rotate(-90deg);
         transform-origin: 50% 50%;

           }
     }
   </style>

And HTML:

<div id="content">
    <iframe src="localhost/iframeTest/index.php" 
      allowtransparency="true" frameborder="0" scrolling="no" 
      class="wistia_embed" name="wistia_embed" allowfullscreen 
      mozallowfullscreen webkitallowfullscreen oallowfullscreen 
       msallowfullscreen width="100%" height="100%"></iframe>
</div>
user5898266
  • 355
  • 2
  • 6
  • 20
  • You can't just use `rotate(-90deg)`. It calculates width and height and rotates afterwards. So its not scaled to your window. You propably need to calculate your width with JS – pixelarbeit Dec 21 '17 at 10:00

1 Answers1

0

As I stated in my comment the problem is, that the size is calculated before you rotate it. To fix this you can use vh, vw sizes and just just vw for height and vh for width. Then you can rotate and translate it back into viewport.

body {
  display: block;
  width: 100vh;
  height: 100vw;
  transform: translateY(100vh) rotate(-90deg);
  transform-origin: top left;
}

Check this codepen to see it working: https://codepen.io/pixelarbeit/pen/rpLbNe

pixelarbeit
  • 484
  • 2
  • 11