How to fit iframe content with landscape orientation within device screen - html

Question

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>

Answer 1

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