css - fixing website to horizontal orientation on mobile devices (in simple terms) -

I'm trying my hardest viewed on a mobile device as opposed to painting as a webpage automatically To make the landscape properly in the landscape orientation. This is a very simple page which currently only includes a video via IFrame.

I have used the code that I have found that was developed by someone else. But I can not work it at all The code I'm trying to implement is in this.

Here the code is going to work but I have to try it. Can anyone tell me why this code is not working?

Below is my code.

CSS

  & lt; Style type = "text / css" & gt; Body, html {margin: 0; Padding: 0; Height: 100%; Hidden flurry; } # Content {status: absolute; Left: 0; Correct: 0; Bottom: 0; Top: 0 pixels; Top: -15px; Minimum height: 100%; Minimum width: 100%} html, body {height: 100%; Minimum height: 100%; } @ Media screen and (min-shape-ratio: 2/1) {body} {transform: rotate (90 degrees); Change-origin: 50% 50%; }}  

HTML

  & lt; Div id = "content" & gt; & Lt; iframe src = "// fast.wistia.net/embed/iframe/qnca9gdlv5?videoFoam=true" allowtransparency = "true" frameborder = "0" scrolling = "no" class = "Wistia_embed" name = "wistia_embed" allowfullscreen Mojholaofloskrin Vebkitolofloskrin Olfofloscrew msallowfullscreen width = "640" height = "388" & gt; & Lt; / Iframe & gt; & Lt; Script src = "// fast.wistia.net/assets/external/E-v1.js"> & Lt; / Script & gt; & Lt; / Div & gt;  

code updated