Media Queries are working but the reverse to how they should

I have been trying for a while now to build a website that fixes in landscape mode on all devices smaller than a tablet however this has been a real headache. I have no idea what I am doing, or what I am doing wrong.

I think my media query is all wrong. I need the website to be in portrait mode to begin with but when viewed on a mobile device it fixes in landscape mode. After much tinkering, I have got it almost working but it is round the wrong way! on desktop it is in landscape mode and then on a mobile device it is in portrait mode! Its mocking me!lol

Here is a livelink of my attempt at getting this code to work. Could somebody please tell me why this code is not working? If you resize the browser you will see for yourself what is wrong.

Below is my code.

CSS

body, html {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content {
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0px;
    top: -15px;
    min-height: 100%;
    min-width: 100%;
}
html, body {
    height: 100%;
    min-height: 100%;
}

@media screen and (min-aspect-ratio: 2/1) {
    body {
        transform: rotate(90deg);
        transform-origin: 50% 50%;
    }
}

HTML

<div id="content">
        <iframe src="//fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="388"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js">   </script>
</div>

UPDATE

I have now corrected the rotation on a smaller resized desktop browser size however on mobile device there is still no rotation.

Solution

@media (max-width: 600px)
body {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}

Above css is changing the height and width of the body

ex: normally

-----40px-----

|
|
|
100px
|
|
|

is rotated by 90 deg and becomes

-----100px-----

|
|
|
40px
|
|
|

This css must be helpful

@media (max-width: 600px)
iframe {
  transform: rotate(90deg);
  /* transform-origin: 50% 50%; */
  width: 100vw!important;
  height: 100vh!important;
}